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 Creating a Next.js Project with TypeScript Creating a New Private Git Repository Setting Up Git Configuration for This Project Uploading Your Local Code to Git for the First Time 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 Go to GitHub and sign in Click the "+" button in the top-right corner and select "New repository" Repository name: next-hello-world Description: Add a brief description of your project Select "Private" Do NOT initialize with README, .gitignore, or license (we'll push our existing code) 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 "your.email@example.com" 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.

May 13, 2025 - 04:13

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.

Creating a Next.js Project with TypeScript
Creating a New Private Git Repository
Setting Up Git Configuration for This Project
Uploading Your Local Code to Git for the First Time
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

Go to GitHub and sign in
Click the "+" button in the top-right corner and select "New repository"
Repository name: next-hello-world
Description: Add a brief description of your project
Select "Private"
Do NOT initialize with README, .gitignore, or license (we'll push our existing code)
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 "your.email@example.com"

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:

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