Ingap.dev - A Personal Dev Blog

Table of Content

Creating a Next.js app and connecting it to a GitHub repository can seem daunting, but it's straightforward if you follow these steps. Let's dive right in!

Step 1: Create a New Next.js App

First, you'll want to create a new Next.js app. Open your terminal and run the following command:

npx create-next-app@latest yournextapp

Leave the default values as they are (also tailwindcss should be installed automatically), but change "yournextapp" with the name you want to give to your project root folder.

Step 2: Create a Private GitHub Repository

Next, create a new GitHub repository. This is where you'll store your project code. If you haven't done this before, GitHub has a handy guide to get you started.

Step 3: Create a Personal Access Token (PAT)

You need a Personal Access Token to authenticate your commands with GitHub. Go to GitHub's PAT page, generate a new token and tick the repo scope to ensure the access to a private repository. Make sure to copy it somewhere safe.

Step 4: Connect Your Project to GitHub

Now, you have a few options to connect your project to GitHub.

Option 1: Using Git Commands

If you haven't done anything yet, try these commands:

git remote add origin https://<pat>@github.com/<user>/<repo>.git
git branch -M main
git push -u origin main

Option 2: If you get errors from Option 1...

If you encounter errors like:

• "remote: Repository not found."
• "error: remote origin already exists."

Just go to your project, go to the ".git" folder, and open the "config" file.

There, you will likely have to change the remote URL from https://github.com/<user>/<repo>.git to https://<pat>@github.com/<user>/<repo>.git

[core]
...

[remote "origin"]
url = https://<pat>@github.com/<user>/<repo>.git
...

[branch "main"]
remote = origin
merge = refs/heads/main

If you continue to experience issues, please contact me here and include the URL of the post in your message.