Creating a Next.js Application

Creating a Next.js Application

Next.js is a React framework that helps you build fast, production-ready web applications. To create a new Next.js project, you need Node.js installed.

Step 1: Install Node.js

Before creating a Next.js app, make sure Node.js is installed. Open your terminal and run:

node -v
npm -v

If you do not see version numbers, install Node.js first from nodejs.org.

Step 2: Create a New Project on Windows

1. Open Command Prompt or PowerShell.
2. Navigate to the folder where you want the project:

   cd Documents\Projects

3. Run the create-next-app command:

   npx create-next-app@latest my-next-app

4. Answer the questions that appear on the screen. For beginners, choose these options:
   • Would you like to use TypeScript? No
   • Would you like to use ESLint? Yes
   • Would you like to use Tailwind CSS? Yes
   • 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
5. Wait while the project is created.
6. Move into the project folder:

   cd my-next-app

Step 3: Create a New Project on Linux

1. Open a terminal.
2. Navigate to the folder where you want the project:

   cd Documents/Projects

3. Run the create-next-app command:

   npx create-next-app@latest my-next-app

4. Choose the same beginner options as listed in the Windows section.
5. Move into the project folder:

   cd my-next-app

Step 4: Run the Development Server

Inside the project folder, run:

npm run dev

This starts the development server. Open your browser and go to:

http://localhost:3000

You should see the Next.js welcome page.

Step 5: Edit the Project

Open the project in any code editor. Try editing the file app/page.tsx (or app/page.js). Change some text and save. The browser will automatically update.

Practice

Create a Next.js app on your computer, run the development server, and change the welcome page text to your name.