Next.js Setup Guide for Developers

This Post provides a step-by-step guide for setting up the next-hello-world project using Next.js with TypeScript, creating a Git repository, and uploading your code for the first time.

Table of Contents

1. Creating a Next.js Project with TypeScript
2. Creating a New Private Git Repository
3. Setting Up Git Configuration for This Project
4. Uploading Your Local Code to Git for the First Time
5. Next Steps

1. Creating a Next.js Project with TypeScript

Prerequisites

• Node.js 18.17 or later installed
• npm or yarn package manager

Setting Up a New Next.js Project

Run the following command in your terminal:

npx create-next-app@latest next-hello-world

You'll be prompted with several options. Here are the recommended choices for our project:

Would you like to use TypeScript? › Yes
Would you like to use ESLint? › Yes
Would you like to use Tailwind CSS? › Yes (recommended for UI development)
Would you like to use `src/` directory? › No
Would you like to use App Router? › Yes
Would you like to customize the default import alias (@/*)? › No

These options create a modern Next.js project with:

• TypeScript for type safety
• ESLint for code quality
• Tailwind CSS for styling
• App Router (the newer, recommended routing system)

Navigate to Your Project

cd next-hello-world

Install Additional Dependencies (Optional)

You may want to add some common dependencies:

npm install axios react-hook-form zod @hookform/resolvers

Start the Development Server

npm run dev

Visit http://localhost:3000 to see your app running.

2. Creating a New Private Git Repository

On GitHub

1. Go to GitHub and sign in
2. Click the "+" button in the top-right corner and select "New repository"
3. Repository name: next-hello-world
4. Description: Add a brief description of your project
5. Select "Private"
6. Do NOT initialize with README, .gitignore, or license (we'll push our existing code)
7. Click "Create repository"

After creating the repository, you'll see instructions for pushing an existing repository. Keep this page open as we'll need the repository URL in the next steps.

3. Setting Up Git Configuration for This Project

Initialize Git in Your Project

First, make sure you're in your project directory:

cd path/to/next-hello-world

Initialize Git:

git init

Configure User Information for This Project Only

Set your name and email for this specific repository:

git config user.name "Your Name"
git config user.email "[e-mail]"

Note: This sets the configuration for this repository only. If you need to use different accounts for different projects, this approach ensures the correct identity is used.

Verify Your Configuration

Check that your settings were applied correctly:

git config user.name
git config user.email

Add Remote Repository

Connect your local repository to the remote one you created:

git remote add origin https://github.com/username/next-hello-world.git

Replace username with your GitHub username or organization name.

Verify Remote

Check that the remote was added correctly:

git remote -v

You should see your repository URL listed for both fetch and push.

4. Uploading Your Local Code to Git for the First Time

Create a .gitignore File

Next.js creates a .gitignore file automatically, but verify it exists and contains appropriate entries:

cat .gitignore

If needed, create or update it with:

# Dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz

# Testing
/coverage

# Next.js
/.next/
/out/
/.swc/
next-env.d.ts

# Production
/build
/dist

# Misc
.DS_Store
*.pem

# Debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# Local env files
.env*.local
.env
.env.development
.env.test
.env.production

# Vercel
.vercel

# TypeScript
*.tsbuildinfo

# IDE specific files
/.idea
# VSCode (ignore all except for recommended extensions and settings)
.vscode/*
!.vscode/extensions.json
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
*.sublime-*
*.code-workspace

# Cache
.eslintcache
.stylelintcache

# Optional: if using Storybook
/storybook-static

# Optional: for SASS
.sass-cache/

# PWA
**/public/sw.js
**/public/workbox-*.js
**/public/worker-*.js
**/public/fallback-*.js
**/public/sw.js.map
**/public/workbox-*.js.map
**/public/worker-*.js.map
**/public/fallback-*.js.map

Stage Your Files

Add all your project files to the staging area:

git add .

Create the Initial Commit

Commit your files with a descriptive message:

git commit -m "Initial commit: Next.js TypeScript project setup"

Push to the Remote Repository

Push your code to the remote repository:

git push -u origin main

Note: If your default branch is named master instead of main, use git push -u origin master instead.

If the Push Fails

If your push is rejected because the remote repository has content that you don't have locally, you can use:

git config pull.rebase false
git pull origin main --allow-unrelated-histories

Resolve any conflicts, commit the changes, and then push again:

git push -u origin main

5. Next Steps

Now that your project is set up and connected to Git, here are some next steps:

Branch Strategy

Create a development branch for ongoing work:

git checkout -b development
git push -u origin development

Pull Requests

When working with a team, use pull requests to merge changes:

1. Make changes in a feature branch
2. Push the branch to GitHub
3. Create a pull request to merge into development
4. After review, merge into main for production