Hello world

This page shows you how to create a new Next.js project and run it.

Development environment setup

Before creating a Next.js application, you need to set up your development environment with two essential tools:

1. Node.js:

   • Download from nodejs.org
   • Install the latest stable release
   • Required version: 18.18 or later for Next.js 15
   • Verify your installation by running node --version

2. Code editor:

   • Visual Studio Code (VS Code) is recommended
   • Download from code.visualstudio.com

Creating a new Next.js project

To create a new Next.js project, use the following command in your terminal:

npx create-next-app@latest

Configuration options

When running the command, you’ll need to respond to several prompts:

1. What is your project named? hello-world
2. Would you like to use TypeScript? Yes
3. Would you like to use ESLint? Yes
4. Would you like to use Tailwind CSS? Yes
5. Would you like your code inside a src/ directory? Yes
6. Would you like to use App Router? (recommended) Yes
7. Would you like to use Turbopack for next dev? No
8. Would you like to customize the import alias (@/* by default)? No

Running the application

After project creation, follow these steps to start your application:

1. Navigate to the project directory:

   cd hello-world

2. Start the development server:

   npm run dev

3. Access your application:

   • Open http://localhost:3000 in your browser
   • The Next.js welcome page will appear

Making your first change

To modify the default page:

1. Navigate to src/app/page.tsx in your code editor
2. Locate the list item content
3. Add a new list item: <li>Hello world</li>
4. Save the file

The browser will automatically refresh to display your changes due to Next.js’s hot reload feature.