Step-by-Step Guide to Setting Up a Next.js 15 Project from Scratch

Next.js has evolved into a leading React framework for building high-performance web applications with server-side rendering (SSR), static site generation (SSG), API routes, and advanced caching mechanisms. With the release of Next.js 15, developers must adapt to important updates, including React 19 support, improved caching defaults, and enhanced form handling.

This guide will take you through the latest and correct step-by-step process of setting up a Next.js 15 project from scratch and following best practices.

1. Prerequisites

Ensure you have the latest versions of the required tools:

Node.js 18.18+ → Download from nodejs.org
npm (Node Package Manager) or yarn
Code editor → VS Code is recommended

To verify your versions, run:

node -v  # Must be 18.18 or newer
npm -v   # Ensure npm is up-to-date

If you’re using yarn, update it globally:

npm install --global yarn

2. Creating a New Next.js 15 Project

To create a Next.js 15 project, use the official CLI:

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

For yarn users:

yarn create next-app my-next-app

This command:

Initializes a Next.js 15 project.
Installs React 19 and React DOM 19 (default in Next.js 15).
Configures ESLint 9 and TypeScript (if selected).

Navigate into the project:

cd my-next-app

Start the development server:

npm run dev

Visit http://localhost:3000/ in your browser.

3. Understanding the Next.js 15 Project Structure

Your project will have the following structure (which may vary significantly):

my-next-app/
│── app/           # Main directory for App Router (default)
│   ├── page.tsx   # Homepage (default)
│   ├── layout.tsx # Global layout (persists across pages)
│── public/        # Static assets (images, icons)
│── styles/        # CSS and global styles
│── next.config.ts # Next.js configuration
│── package.json   # Project dependencies and scripts

Notable Updates in Next.js 15

App Router is default (app/ instead of pages/).
React 19 is used for improved performance.
Async APIs (cookies(), headers()) are now mandatory.
Caching defaults have changed (no more auto-caching for fetch()).
New <Form> Component enhances navigation in forms.

4. Creating Your First Page

The default home page is already in app/page.tsx. Modify it:

export default function Home() {
  return (
    <div>
      <h1>Welcome to My Next.js 15 App</h1>
      <p>Next.js 15 brings better caching, React 19 support, and a smoother developer experience.</p>
    </div>
  );
}

It updates in real-time when saved.

5. Creating a New Page

To add an About page:

Create a new file app/about/page.tsx
Add the following code:

export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the new about page using Next.js 15.</p>
    </div>
  );
}

Visit http://localhost:3000/about to see your new page!

6. Using Static and Dynamic Routes

Static Route Example

Create app/contact/page.tsx:

export default function Contact() {
  return <h1>Contact Page</h1>;
}

Accessible at: http://localhost:3000/contact

Dynamic Route Example

Create app/blog/[id]/page.tsx:

import { useParams } from "next/navigation";

export default function BlogPost() {
  const { id } = useParams();

  return <h1>Blog Post ID: {id}</h1>;
}

Accessible at http://localhost:3000/blog/1, http://localhost:3000/blog/2, etc.

7. Caching & Fetching Data in Next.js 15

1. Fetching Data with `fetch()`

In Next.js 15, fetch() is no longer cached by default. You must explicitly cache or revalidate:

async function getData() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts", {
    cache: "force-cache", // Opt-in to caching
  });
  return res.json();
}

export default async function Posts() {
  const posts = await getData();
  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.slice(0, 5).map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

2. Using Server-Side Rendering (SSR)

If you need real-time data:

async function getServerData() {
  const res = await fetch("https://api.example.com/data", {
    cache: "no-store", // Forces new data on every request
  });
  return res.json();
}

8. Deploying Next.js 15 on Vercel

To deploy for free on Vercel:

Install Vercel CLI:
```
npm install -g vercel
```
Log in:
```
vercel login
```
Deploy:
```
vercel
```

Conclusion

Next.js 15 introduces important changes, including React 19 support, new async request APIs, updated caching defaults, and better server actions. Setting up a project is now even more streamlined, and deployment on Vercel remains the easiest option.

By following this guide, you’ll gain insight into building fast, scalable web applications using modern best practices. However, this is not a complete tutorial and cannot be used to build a Next.js app from scratch. Instead, it’s an informative article designed to spark your interest in Next.js. If you’re looking for a step-by-step guide, I recommend checking out JavaScript Mastery on YouTube for in-depth tutorials.

Disclaimer

Article written with the help of AI.

Step-by-Step Guide to Setting Up a Next.js 15 Project from Scratch