Creating Your First Next.js 15 Project

It's time to get hands-on! In this lesson, you'll create your very first Next.js 15 application. Don't worry—Next.js makes this incredibly easy with a single command. By the end of this lesson, you'll have a working Next.js app running on your computer, and you'll understand every file that was created for you.

Before We Begin: Prerequisites

Before creating your first Next.js project, make sure you have:

1. Node.js Installed

Next.js requires Node.js version 18.17 or later. Let's check if you have it:

BASH

# Check your Node.js version
node --version

# You should see something like: v18.17.0 or higher
# If you see v20.x.x or v22.x.x, that's perfect!

Don't Have Node.js?

If the command above shows an error or a version below 18.17:

Visit nodejs.org
Download the LTS (Long Term Support) version
Install it following the installer instructions
Restart your terminal and try the command again

2. A Code Editor

We recommend Visual Studio Code (VS Code) - it's free and has excellent Next.js support:

Download from code.visualstudio.com
Install these VS Code extensions (optional but helpful):
- ES7+ React/Redux/React-Native snippets - Quick code snippets
- Tailwind CSS IntelliSense - If you'll use Tailwind
- Prettier - Code formatting

3. Terminal/Command Line Access

You'll need to run commands in a terminal:

Mac: Use the built-in Terminal app or iTerm2
Windows: Use Command Prompt, PowerShell, or Windows Terminal
Linux: Use your distribution's terminal

Creating Your Next.js Project

Now for the exciting part! We'll use create-next-app, which is the official tool for creating Next.js applications.

Step 1: Run the Create Command

Open your terminal and run:

BASH

npx create-next-app@15 my-first-next-app

💡 Understanding This Command

npx - Executes packages without installing them globally
create-next-app@latest - The official Next.js project creator (latest version)
my-first-next-app - Your project name (you can change this to anything you want)

Step 2: Answer the Setup Questions

The installer will ask you several questions. Here's what to choose for this tutorial:

PLAINTEXT

✔ Would you like to use TypeScript? › Yes
✔ Would you like to use ESLint? › Yes
✔ Would you like to use Tailwind CSS? › Yes
✔ Would you like your code inside a `src/` directory? › No
✔ Would you like to use App Router? › Yes (recommended)
✔ Would you like to use Turbopack for `next dev`? › Yes
✔ Would you like to customize the import alias? › No

📘 TypeScript - Yes

TypeScript adds type safety to your code, catching errors before runtime. If you're comfortable with JavaScript, TypeScript is worth learning. For this tutorial, we'll use it.

🔍 ESLint - Yes

ESLint helps catch errors and enforce code quality. It's like a helpful assistant checking your code. Always say yes to this.

🎨 Tailwind CSS - Yes

Tailwind is a popular CSS framework for styling. It makes creating beautiful UIs faster. We'll use it in this tutorial.

📁 src/ directory - No

This would put your code in a src folder. For beginners, keeping files at the root is simpler. Choose No.

✅ App Router - Yes

This is crucial! The App Router is the modern, recommended way to build Next.js apps. This entire tutorial series focuses on the App Router. Always choose Yes.

⚡ Turbopack - Yes

Turbopack is Next.js's new, faster bundler. It makes development faster. Choose Yes for better development experience.

🔤 Import alias - No

This customizes import paths. The defaults work great, so choose No for now.

Step 3: Wait for Installation

The installer will download and install all necessary dependencies. This might take a minute or two depending on your internet speed. You'll see something like:

PLAINTEXT

Creating a new Next.js app in /your/path/my-first-next-app

Installing dependencies:
- react
- react-dom
- next
- typescript
- tailwindcss
- eslint
...

Initialized a git repository.

Success! Created my-first-next-app at /your/path/my-first-next-app

🎉 Congratulations!

You've just created your first Next.js project! All the files are set up and ready to go. Let's explore what was created.

Understanding Your Project Structure

Before we run the app, let's understand what files were created and what they do:

Your Next.js Project Files

Click on files and folders to learn what each one does

my-next-app

Select a file or folder to see details

Key Files Explained

1. package.json - Project Configuration

This file defines your project's metadata, dependencies, and scripts:

package.json

{
  "name": "my-first-next-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "next": "^15.0.0"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "^15.0.0"
  }
}

Important scripts:

npm run dev - Starts development server with hot reloading
npm run build - Creates production-ready build
npm start - Runs production build locally
npm run lint - Checks code for errors and style issues

2. app/layout.tsx - Root Layout

This is the root layout that wraps your entire application. It's required and must include <html> and <body> tags:

app/layout.tsx

import type { Metadata } from "next";
import "./globals.css";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}

Key points about this file:

It's a Server Component (no "use client")
metadata object sets page title and description for SEO
children is where your page content will be rendered
You can add global elements here (navbar, footer, etc.)

3. app/page.tsx - Homepage

This file creates your homepage (the / route):

app/page.tsx

export default function Home() {
  return (
    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
        <h1 className="text-4xl font-bold">
          Welcome to Next.js!
        </h1>
        <p>
          Get started by editing{" "}
          <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
            app/page.tsx
          </code>
        </p>
      </main>
    </div>
  );
}

This is a simple React component that:

Is also a Server Component by default
Returns JSX that becomes your homepage
Uses Tailwind CSS classes for styling
Can be edited to create your actual homepage

4. app/globals.css - Global Styles

This file contains global CSS that applies to your entire application:

app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
}

This includes:

Tailwind CSS directives
CSS custom properties (variables)
Dark mode support
Base styling for the body

5. next.config.ts - Next.js Configuration

This file configures Next.js behavior. The default is simple:

next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
};

export default nextConfig;

You'll add configuration here as needed (image domains, redirects, etc.). We'll cover this in detail later.

6. tsconfig.json - TypeScript Configuration

This configures TypeScript for your project. Next.js has set this up perfectly for you, so you rarely need to modify it.

Running Your Next.js App

Now let's see your application in action!

Step 1: Navigate to Your Project

BASH

cd my-first-next-app

Step 2: Start the Development Server

BASH

npm run dev

You'll see output like this:

PLAINTEXT

  ▲ Next.js 15.0.0
  - Local:        http://localhost:3000
  - Turbopack:    enabled

 ✓ Starting...
 ✓ Ready in 1.2s

Step 3: Open in Your Browser

Open your web browser and go to: http://localhost:3000

🎉 Success!

You should see the Next.js welcome page! This confirms everything is working correctly.

The page includes the Next.js logo, some cards with helpful links, and instructions to get started.

Development Server Features

Hot Reloading: Changes to your code automatically refresh the browser
Fast Refresh: Preserves component state while editing
Error Overlay: Helpful error messages appear right in the browser
Turbopack: Extremely fast bundling and updates

Making Your First Edit

Let's make a change to see hot reloading in action!

Step 1: Open the Project in VS Code

With your terminal still running the dev server, open a new terminal window/tab and run:

BASH

# Still in the my-first-next-app directory
code .

This opens VS Code in your project folder. You can also open VS Code manually and then open the folder.

Step 2: Edit app/page.tsx

Open app/page.tsx and replace the entire content with this simple version:

app/page.tsx

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24">
      <div className="text-center">
        <h1 className="text-6xl font-bold mb-4">
          Hello, Next.js!
        </h1>
        <p className="text-xl text-gray-600">
          Welcome to my first Next.js application 🚀
        </p>
        <div className="mt-8">
          <p className="text-gray-500">
            Edit <code className="bg-gray-100 px-2 py-1 rounded">app/page.tsx</code> and save to see changes!
          </p>
        </div>
      </div>
    </main>
  );
}

Step 3: Save and Watch the Magic

Save the file (Ctrl+S or Cmd+S). Now look at your browser—it automatically updated! You should see your new "Hello, Next.js!" heading.

⚡ Fast Refresh in Action

This is Fast Refresh at work! Every time you save a file, Next.js automatically updates your browser without needing a full page reload. This makes development incredibly fast and enjoyable.

Step 4: Try More Changes

Experiment by changing:

The heading text
The emoji
Tailwind classes (try text-blue-600 or text-red-500)
Add more paragraphs or elements

Each time you save, the browser updates instantly. This is how you'll work with Next.js every day!

Understanding What Just Happened

Let's understand the development workflow:

You edited app/page.tsx: This file defines your homepage component
You saved the file: Next.js detected the change
Turbopack rebuilt: Only the changed code was recompiled (super fast!)
Browser updated: Fast Refresh injected the changes without full reload
State preserved: If you had any form inputs or state, they would remain intact

This workflow is much faster than traditional web development where you'd need to manually refresh the browser after every change.

Quick Tailwind CSS Introduction

You might have noticed we're using classes like text-6xl and font-bold. These are Tailwind CSS utility classes.

Here are some common Tailwind classes to get you started:

Class	What It Does
`text-xl`	Extra large text
`font-bold`	Bold text
`text-blue-600`	Blue color
`p-4`	Padding on all sides
`mb-4`	Margin bottom
`flex`	Flexbox display
`items-center`	Center items vertically
`rounded-lg`	Large rounded corners

🎨 Learning Tailwind

Don't worry about memorizing Tailwind classes right now. We'll cover styling in detail later. For now, just know that these classes style your elements without writing separate CSS files.

VS Code's IntelliSense will suggest classes as you type, making it easy to discover what's available!

Stopping the Development Server

When you're done working, you can stop the development server:

BASH

# In the terminal running the dev server
# Press Ctrl+C (Windows/Linux) or Cmd+C (Mac)

# You'll see something like:
^C
- wait compiling...
Server closed

To start it again, just run npm run dev in your project directory.

Common Issues and Solutions

Port 3000 Already in Use

Error: "Port 3000 is already in use"

Solution: Either:

Stop whatever is running on port 3000, or
Run Next.js on a different port:
BASH
```
npm run dev -- --port 3001
```

Module Not Found Errors

Error: "Cannot find module..."

Solution: Install dependencies:

BASH

npm install

TypeScript Errors

Error: Red squiggly lines in VS Code

Solution: TypeScript is catching errors before runtime—this is good! Read the error message and fix the issue. If you're stuck, you can temporarily add // @ts-ignore above the line, but try to understand and fix the actual issue.

Page Not Loading

Problem: Browser shows "This site can't be reached"

Solutions:

Make sure the dev server is running
Check you're going to http://localhost:3000 (not https)
Try clearing your browser cache
Try a different browser

Practice: Modify Your Homepage

Now that you have a working Next.js app, try these exercises:

Change the heading: Make it say "My Awesome Next.js App"
Add a subheading: Add an <h2> tag with your name
Change colors: Try different Tailwind color classes like text-purple-600 or text-green-500
Add a button: Create a button element with some styling
Add spacing: Use mt-8 (margin top) and mb-4 (margin bottom) to add space

Here's a starter template you can build from:

Experiment with Your Homepage

Modify this code and click 'Run' to see changes

page.tsx

Output Preview

Click "Run Code" to see the output

Key Takeaways

npx create-next-app@latest creates a new Next.js project
Choose TypeScript, ESLint, Tailwind, and App Router during setup
npm run dev starts the development server on localhost:3000
app/page.tsx is your homepage component
app/layout.tsx is the root layout wrapping all pages
Fast Refresh automatically updates your browser when you save files
Turbopack makes development blazing fast with instant rebuilds
All files are TypeScript by default (.tsx extension)
Tailwind CSS is pre-configured for styling
The project structure is logical and organized out of the box

What's Next?

Congratulations! You now have a working Next.js application. You've seen how easy it is to create a project, make changes, and see them update in real-time.

In the next lesson, we'll dive deeper into the Next.js project structure. We'll explore each file and folder in detail, understand what they do, and learn how to organize your code as your application grows.

🎯 Keep Your Project Running

Don't delete your Next.js project! We'll continue building on it in the next lessons. Keep the development server running as you move to the next tutorial, or remember where you saved the project folder.

Test Your Understanding

Question 1 of 4

What command creates a new Next.js 15 project?

Before We Begin: Prerequisites

Before creating your first Next.js project, make sure you have:

1. Node.js Installed

Next.js requires Node.js version 18.17 or later. Let's check if you have it:

BASH

# Check your Node.js version
node --version

# You should see something like: v18.17.0 or higher
# If you see v20.x.x or v22.x.x, that's perfect!

Don't Have Node.js?

If the command above shows an error or a version below 18.17:

Visit nodejs.org
Download the LTS (Long Term Support) version
Install it following the installer instructions
Restart your terminal and try the command again

2. A Code Editor

We recommend Visual Studio Code (VS Code) - it's free and has excellent Next.js support:

Download from code.visualstudio.com
Install these VS Code extensions (optional but helpful):
- ES7+ React/Redux/React-Native snippets - Quick code snippets
- Tailwind CSS IntelliSense - If you'll use Tailwind
- Prettier - Code formatting

3. Terminal/Command Line Access

You'll need to run commands in a terminal:

Mac: Use the built-in Terminal app or iTerm2
Windows: Use Command Prompt, PowerShell, or Windows Terminal
Linux: Use your distribution's terminal

Creating Your Next.js Project

Now for the exciting part! We'll use create-next-app, which is the official tool for creating Next.js applications.

Step 1: Run the Create Command

Open your terminal and run:

BASH

npx create-next-app@15 my-first-next-app

💡 Understanding This Command

npx - Executes packages without installing them globally
create-next-app@latest - The official Next.js project creator (latest version)
my-first-next-app - Your project name (you can change this to anything you want)

Step 2: Answer the Setup Questions

The installer will ask you several questions. Here's what to choose for this tutorial:

PLAINTEXT

✔ Would you like to use TypeScript? › Yes
✔ Would you like to use ESLint? › Yes
✔ Would you like to use Tailwind CSS? › Yes
✔ Would you like your code inside a `src/` directory? › No
✔ Would you like to use App Router? › Yes (recommended)
✔ Would you like to use Turbopack for `next dev`? › Yes
✔ Would you like to customize the import alias? › No

📘 TypeScript - Yes

TypeScript adds type safety to your code, catching errors before runtime. If you're comfortable with JavaScript, TypeScript is worth learning. For this tutorial, we'll use it.

🔍 ESLint - Yes

ESLint helps catch errors and enforce code quality. It's like a helpful assistant checking your code. Always say yes to this.

🎨 Tailwind CSS - Yes

Tailwind is a popular CSS framework for styling. It makes creating beautiful UIs faster. We'll use it in this tutorial.

📁 src/ directory - No

This would put your code in a src folder. For beginners, keeping files at the root is simpler. Choose No.

✅ App Router - Yes

This is crucial! The App Router is the modern, recommended way to build Next.js apps. This entire tutorial series focuses on the App Router. Always choose Yes.

⚡ Turbopack - Yes

Turbopack is Next.js's new, faster bundler. It makes development faster. Choose Yes for better development experience.

🔤 Import alias - No

This customizes import paths. The defaults work great, so choose No for now.

Step 3: Wait for Installation

The installer will download and install all necessary dependencies. This might take a minute or two depending on your internet speed. You'll see something like:

PLAINTEXT

Creating a new Next.js app in /your/path/my-first-next-app

Installing dependencies:
- react
- react-dom
- next
- typescript
- tailwindcss
- eslint
...

Initialized a git repository.

Success! Created my-first-next-app at /your/path/my-first-next-app

🎉 Congratulations!

You've just created your first Next.js project! All the files are set up and ready to go. Let's explore what was created.

Understanding Your Project Structure

Before we run the app, let's understand what files were created and what they do:

Your Next.js Project Files

Click on files and folders to learn what each one does

my-next-app

Select a file or folder to see details

Key Files Explained

1. package.json - Project Configuration

This file defines your project's metadata, dependencies, and scripts:

package.json

{
  "name": "my-first-next-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "next": "^15.0.0"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "^15.0.0"
  }
}

Important scripts:

npm run dev - Starts development server with hot reloading
npm run build - Creates production-ready build
npm start - Runs production build locally
npm run lint - Checks code for errors and style issues

2. app/layout.tsx - Root Layout

This is the root layout that wraps your entire application. It's required and must include <html> and <body> tags:

app/layout.tsx

import type { Metadata } from "next";
import "./globals.css";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}

Key points about this file:

It's a Server Component (no "use client")
metadata object sets page title and description for SEO
children is where your page content will be rendered
You can add global elements here (navbar, footer, etc.)

3. app/page.tsx - Homepage

This file creates your homepage (the / route):

app/page.tsx

export default function Home() {
  return (
    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
        <h1 className="text-4xl font-bold">
          Welcome to Next.js!
        </h1>
        <p>
          Get started by editing{" "}
          <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
            app/page.tsx
          </code>
        </p>
      </main>
    </div>
  );
}

This is a simple React component that:

Is also a Server Component by default
Returns JSX that becomes your homepage
Uses Tailwind CSS classes for styling
Can be edited to create your actual homepage

4. app/globals.css - Global Styles

This file contains global CSS that applies to your entire application:

app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
}

This includes:

Tailwind CSS directives
CSS custom properties (variables)
Dark mode support
Base styling for the body

5. next.config.ts - Next.js Configuration

This file configures Next.js behavior. The default is simple:

next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
};

export default nextConfig;

You'll add configuration here as needed (image domains, redirects, etc.). We'll cover this in detail later.

6. tsconfig.json - TypeScript Configuration

This configures TypeScript for your project. Next.js has set this up perfectly for you, so you rarely need to modify it.

Running Your Next.js App

Now let's see your application in action!

Step 1: Navigate to Your Project

BASH

cd my-first-next-app

Step 2: Start the Development Server

BASH

npm run dev

You'll see output like this:

PLAINTEXT

  ▲ Next.js 15.0.0
  - Local:        http://localhost:3000
  - Turbopack:    enabled

 ✓ Starting...
 ✓ Ready in 1.2s

Step 3: Open in Your Browser

Open your web browser and go to: http://localhost:3000

🎉 Success!

You should see the Next.js welcome page! This confirms everything is working correctly.

The page includes the Next.js logo, some cards with helpful links, and instructions to get started.

Development Server Features

Hot Reloading: Changes to your code automatically refresh the browser
Fast Refresh: Preserves component state while editing
Error Overlay: Helpful error messages appear right in the browser
Turbopack: Extremely fast bundling and updates

Making Your First Edit

Let's make a change to see hot reloading in action!

Step 1: Open the Project in VS Code

With your terminal still running the dev server, open a new terminal window/tab and run:

BASH

# Still in the my-first-next-app directory
code .

This opens VS Code in your project folder. You can also open VS Code manually and then open the folder.

Step 2: Edit app/page.tsx

Open app/page.tsx and replace the entire content with this simple version:

app/page.tsx

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24">
      <div className="text-center">
        <h1 className="text-6xl font-bold mb-4">
          Hello, Next.js!
        </h1>
        <p className="text-xl text-gray-600">
          Welcome to my first Next.js application 🚀
        </p>
        <div className="mt-8">
          <p className="text-gray-500">
            Edit <code className="bg-gray-100 px-2 py-1 rounded">app/page.tsx</code> and save to see changes!
          </p>
        </div>
      </div>
    </main>
  );
}

Step 3: Save and Watch the Magic

Save the file (Ctrl+S or Cmd+S). Now look at your browser—it automatically updated! You should see your new "Hello, Next.js!" heading.

⚡ Fast Refresh in Action

This is Fast Refresh at work! Every time you save a file, Next.js automatically updates your browser without needing a full page reload. This makes development incredibly fast and enjoyable.

Step 4: Try More Changes

Experiment by changing:

The heading text
The emoji
Tailwind classes (try text-blue-600 or text-red-500)
Add more paragraphs or elements

Each time you save, the browser updates instantly. This is how you'll work with Next.js every day!

Understanding What Just Happened

Let's understand the development workflow:

You edited app/page.tsx: This file defines your homepage component
You saved the file: Next.js detected the change
Turbopack rebuilt: Only the changed code was recompiled (super fast!)
Browser updated: Fast Refresh injected the changes without full reload
State preserved: If you had any form inputs or state, they would remain intact

This workflow is much faster than traditional web development where you'd need to manually refresh the browser after every change.

Quick Tailwind CSS Introduction

You might have noticed we're using classes like text-6xl and font-bold. These are Tailwind CSS utility classes.

Here are some common Tailwind classes to get you started:

Class	What It Does
`text-xl`	Extra large text
`font-bold`	Bold text
`text-blue-600`	Blue color
`p-4`	Padding on all sides
`mb-4`	Margin bottom
`flex`	Flexbox display
`items-center`	Center items vertically
`rounded-lg`	Large rounded corners

🎨 Learning Tailwind

Don't worry about memorizing Tailwind classes right now. We'll cover styling in detail later. For now, just know that these classes style your elements without writing separate CSS files.

VS Code's IntelliSense will suggest classes as you type, making it easy to discover what's available!

Stopping the Development Server

When you're done working, you can stop the development server:

BASH

# In the terminal running the dev server
# Press Ctrl+C (Windows/Linux) or Cmd+C (Mac)

# You'll see something like:
^C
- wait compiling...
Server closed

To start it again, just run npm run dev in your project directory.

Common Issues and Solutions

Port 3000 Already in Use

Error: "Port 3000 is already in use"

Solution: Either:

Stop whatever is running on port 3000, or
Run Next.js on a different port:
BASH
```
npm run dev -- --port 3001
```

Module Not Found Errors

Error: "Cannot find module..."

Solution: Install dependencies:

BASH

npm install

TypeScript Errors

Error: Red squiggly lines in VS Code

Page Not Loading

Problem: Browser shows "This site can't be reached"

Solutions:

Make sure the dev server is running
Check you're going to http://localhost:3000 (not https)
Try clearing your browser cache
Try a different browser

Practice: Modify Your Homepage

Now that you have a working Next.js app, try these exercises:

Change the heading: Make it say "My Awesome Next.js App"
Add a subheading: Add an <h2> tag with your name
Change colors: Try different Tailwind color classes like text-purple-600 or text-green-500
Add a button: Create a button element with some styling
Add spacing: Use mt-8 (margin top) and mb-4 (margin bottom) to add space

Here's a starter template you can build from:

Experiment with Your Homepage

Modify this code and click 'Run' to see changes

page.tsx

Output Preview

Click "Run Code" to see the output

Key Takeaways

npx create-next-app@latest creates a new Next.js project
Choose TypeScript, ESLint, Tailwind, and App Router during setup
npm run dev starts the development server on localhost:3000
app/page.tsx is your homepage component
app/layout.tsx is the root layout wrapping all pages
Fast Refresh automatically updates your browser when you save files
Turbopack makes development blazing fast with instant rebuilds
All files are TypeScript by default (.tsx extension)
Tailwind CSS is pre-configured for styling
The project structure is logical and organized out of the box

What's Next?

Congratulations! You now have a working Next.js application. You've seen how easy it is to create a project, make changes, and see them update in real-time.

🎯 Keep Your Project Running

Test Your Understanding

Question 1 of 4

Creating Your First Next.js 15 Project

Before We Begin: Prerequisites

1. Node.js Installed

Don't Have Node.js?

2. A Code Editor

3. Terminal/Command Line Access

Creating Your Next.js Project

Step 1: Run the Create Command

Step 2: Answer the Setup Questions

📘 TypeScript - Yes

🔍 ESLint - Yes

🎨 Tailwind CSS - Yes

📁 src/ directory - No

✅ App Router - Yes

⚡ Turbopack - Yes

🔤 Import alias - No

Step 3: Wait for Installation

Understanding Your Project Structure

Your Next.js Project Files

Key Files Explained

1. package.json - Project Configuration

2. app/layout.tsx - Root Layout

3. app/page.tsx - Homepage

4. app/globals.css - Global Styles

5. next.config.ts - Next.js Configuration

6. tsconfig.json - TypeScript Configuration

Running Your Next.js App

Step 1: Navigate to Your Project

Step 2: Start the Development Server

Step 3: Open in Your Browser

Development Server Features

Making Your First Edit

Step 1: Open the Project in VS Code

Step 2: Edit app/page.tsx

Step 3: Save and Watch the Magic

Step 4: Try More Changes

Understanding What Just Happened

Quick Tailwind CSS Introduction

Stopping the Development Server

Common Issues and Solutions

Port 3000 Already in Use

Module Not Found Errors

TypeScript Errors

Page Not Loading

Practice: Modify Your Homepage

Experiment with Your Homepage

Output Preview

Key Takeaways

What's Next?

Test Your Understanding

What command creates a new Next.js 15 project?

Just created my first Next.js app! Check out this step-by-step guide.

Continue Building with Next.js

You might also like

UI Components

Developer Tools

HTML Game

Join Our Web Development Training Program

Join Our Social Communities

NextJS Tutorials

Creating Your First Next.js 15 Project

Before We Begin: Prerequisites

1. Node.js Installed

Don't Have Node.js?

2. A Code Editor

3. Terminal/Command Line Access

Creating Your Next.js Project

Step 1: Run the Create Command

Step 2: Answer the Setup Questions

📘 TypeScript - Yes

🔍 ESLint - Yes

🎨 Tailwind CSS - Yes

📁 src/ directory - No

✅ App Router - Yes

⚡ Turbopack - Yes

🔤 Import alias - No

Step 3: Wait for Installation

Understanding Your Project Structure

Your Next.js Project Files

Key Files Explained