Getting Started with Next.js 15

The world of web development moves fast, and keeping up with the latest tools and frameworks is key to building modern, performant applications. Next.js has established itself as a leading React framework, providing a powerful and opinionated way to build server-rendered and static web applications with ease.

With the release of Next.js 15, the framework continues to push boundaries, particularly in build performance and stability, thanks to its Rust-based compiler, Turbopack.

If you're looking to jump into the Next.js ecosystem, this post is your guide to setting up your very first project using the latest version, Next.js 15.

Why Choose Next.js?

Before we dive in, a quick recap on why Next.js is so popular:

Server-Side Rendering (SSR) & Static Site Generation (SSG): Build applications that are fast, SEO-friendly, and performant out-of-the-box.
File-System Routing: Pages are simply files in a directory (app/ or pages/).
API Routes: Build your backend API alongside your frontend.
Optimized Bundling: Automatic code splitting and optimizations for faster loading.
Full-Stack Capabilities: Build both frontend and backend logic within the same framework.
Built on React: Leverage your existing React knowledge.

Next.js 15 refines these capabilities, making the development experience even smoother, especially during local development and builds.

Prerequisites

To follow along, you'll need:

Node.js: Make sure you have Node.js installed, version 18.17 or higher is recommended. You can download it from nodejs.org.
npm, yarn, or pnpm: These package managers come with Node.js or can be installed separately. npx (which comes with npm) is particularly useful for bootstrapping projects.
Basic React Knowledge: Familiarity with React components, JSX, and props will be helpful.
Code Editor: A code editor like VS Code is highly recommended for its excellent support for React and TypeScript.

Step 1: Creating Your First Next.js 15 Project

The easiest way to start a new Next.js project is by using create-next-app. This command-line tool sets up a new Next.js application with all the necessary configurations.

Open your terminal and run the following command:

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

Let's break this down:

npx: Executes the create-next-app package without installing it globally.
create-next-app: The command to scaffold the project.
@latest: Ensures you get the newest version of create-next-app, which will install Next.js 15 (or later).
my-nextjs15-app: This will be the name of your project directory. Feel free to replace it with your desired project name.

After running the command, create-next-app will ask you a few questions to configure your project:

What is your project named? my-nextjs15-app
Would you like to use TypeScript? (Yes)
Would you like to use ESLint? (Yes)
Would you like to use Tailwind CSS? (No)
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)
Would you like to configure experimental compilation? (Yes)

For beginners, accepting the defaults is often the best approach. Here's a quick rundown of the important options:

TypeScript: Highly recommended for type safety.
ESLint: For code quality and linting.
App Router: Crucially, select "Yes" here. The App Router is the modern standard for Next.js 13+, offering powerful features like Server Components and nested layouts. The pages/ directory router is still supported but the app/ router is the recommended way to start new projects.
Experimental compilation: This refers to opting into features like the new Rust compiler pipeline (Turbopack), which is a key performance improvement in Next.js 15. Saying yes here leverages the performance benefits out of the box.

Once you answer the questions, create-next-app will install all the necessary dependencies.

Step 2: Navigating Your Project Structure

Navigate into your newly created project directory:

cd my-nextjs15-app

You'll see a file structure similar to this (depending on your choices):

my-nextjs15-app/
├── app/             # The heart of the App Router
│   ├── global.css   # Global styles
│   ├── layout.tsx   # Root layout (HTML, body structure)
│   ├── page.tsx     # The root page (/)
│   └── favicon.ico
├── public/          # Static assets (images, etc.)
├── .eslintrc.json   # ESLint configuration
├── .gitignore       # Git ignored files
├── next.config.mjs  # Next.js configuration
├── package.json     # Project dependencies and scripts
├── README.md
├── tsconfig.json    # TypeScript configuration (if using TS)
└── ...

Key directories and files to note:

app/: This directory is central to the App Router.
- app/page.tsx: This file defines the root page of your application, accessible at /.
- app/layout.tsx: This defines the root layout that wraps your pages. It's essential for defining the <html> and <body> structure and is required in the App Router.
- Nested folders within app/ define nested routes. For example, app/dashboard/page.tsx would be accessible at /dashboard.
public/: This directory serves static assets directly. Anything placed here (like images or fonts) can be accessed from the root of your application (e.g., /my-image.png for public/my-image.png).

Step 3: Running the Development Server

Now that your project is set up, let's see it in action. Run the development server using your package manager:

npm run dev
# or
# yarn dev
# or
# pnpm dev

This command starts the Next.js development server. You'll typically see output like this:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
...

Open your web browser and visit http://localhost:3000. You should see the default Next.js welcome page!

The development server features Hot Module Replacement (HMR), meaning you can make changes to your code, save, and the browser will update automatically without a full page reload. Next.js 15, with its enhanced compiler pipeline, makes these development rebuilds even faster, leading to a more responsive development experience.

Step 4: Building Your First Page

Let's make a simple change to the home page. Open app/page.tsx in your code editor. You'll see a React component function defined there.

Delete the existing content inside the default Home function (or modify it) and replace it with something simpler:

// app/page.tsx

export default function Home() {
  return (
    <main>
      <h1>Hello, Next.js 15!</h1>
      <p>This is my first Next.js application using the App Router.</p>
    </main>
  );
}

Save the file. Go back to your browser at http://localhost:3000. You should instantly see your changes reflected!

Creating a New Page:

Let's create a new route. Inside the app/ directory, create a new folder called about. Inside the about folder, create a file named page.tsx.

app/
├── about/
│   └── page.tsx
├── global.css
├── layout.tsx
└── page.tsx

Now, open app/about/page.tsx and add a simple component:

// app/about/page.tsx

export default function AboutPage() {
  return (
    <main>
      <h1>About Us</h1>
      <p>Learn more about this amazing Next.js 15 project!</p>
    </main>
  );
}

Save the file. Without doing anything else, open your browser and navigate to http://localhost:3000/about. Next.js automatically created a route for you based on the folder structure and the page.tsx file!

This file-system-based routing is a core concept in Next.js and makes creating new pages incredibly intuitive.

Understanding Server and Client Components (App Router)

One of the most significant changes introduced with the App Router (and default in Next.js 15) is the concept of Server Components and Client Components.

Server Components (Default): By default, components inside the app/ directory are Server Components. They render on the server, reducing the amount of JavaScript sent to the client. This improves initial load performance and SEO. They have no access to browser APIs (like window or localStorage) and cannot use React hooks like useState or useEffect.
Client Components: If you need interactivity, state, effects, or browser API access, you mark a component as a Client Component by adding "use client"; at the very top of the file (before any imports).

// app/components/MyInteractiveComponent.tsx
"use client"; // <-- This makes it a Client Component

import { useState } from 'react';

export default function MyInteractiveComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

You can then import and use MyInteractiveComponent inside a Server Component (like your page.tsx files). Next.js handles the rest, rendering the Server Component on the server and hydrating the Client Component on the client.

Understanding this distinction is key to building effective applications with the App Router.

What's Noteworthy in Next.js 15 for Beginners?

While Next.js 15 introduces many under-the-hood improvements, the most immediate benefit for someone just starting out using create-next-app@latest is the performance of the development server and build process. The enhanced Rust compiler (Turbopack) is enabled by default or easily opt-in via the experimental compilation prompt, leading to:

Faster Cold Starts: Your development server starts up quicker.
Faster Hot Module Replacement (HMR): Changes appear in the browser even faster during development.
Faster Builds: When you're ready to deploy, the final build process is quicker.

This means less waiting and more coding, right from the start!

Next Steps

You've successfully set up and run your first Next.js 15 application. Here's what you can explore next:

Official Next.js Documentation: The official documentation is comprehensive and the best resource for deep diving into features. Pay close attention to the App Router sections.
Routing: Learn about nested routes, dynamic routes (app/blog/[slug]/page.tsx), and route groups (app/(marketing)/).
Data Fetching: Explore how to fetch data efficiently in Server and Client Components.
Styling: Learn how to use CSS Modules, Tailwind CSS, or other styling solutions.
API Routes: Build backend endpoints within your app/api/ directory.
Deployment: Learn how to deploy your Next.js app to platforms like Vercel, Netlify, or others.

Conclusion

Getting started with Next.js 15 is straightforward thanks to create-next-app. You now have a modern React application set up with the powerful App Router and the performance benefits of the latest Next.js version.

You've learned how to create a project, understand the basic file structure, run the development server, build simple pages, and got a brief introduction to Server and Client Components.

This is just the beginning. Next.js is a feature-rich framework that can handle anything from small static sites to large, complex web applications. Dive into the documentation, experiment, and start building!

Happy coding!

Getting Started with Next.js 15