Getting Started with Next.js 15: A Complete Guide

Next.js 15 has arrived with exciting new features and improvements! In this comprehensive guide, we'll walk through everything you need to know to get started building amazing web applications.

Why Next.js?

Next.js is a powerful React framework that makes building modern web applications easier than ever. Here's why developers love it:

💡NOTE

Next.js provides an excellent developer experience with features like hot reloading, automatic code splitting, and built-in optimization.

Key Features

Server-Side Rendering (SSR) - Improve SEO and initial page load
Static Site Generation (SSG) - Lightning-fast performance
API Routes - Build your backend and frontend in one place
File-based Routing - Intuitive and powerful routing system
Image Optimization - Automatic image optimization built-in

Installation

Getting started is simple. Create a new Next.js project with:

BASH

npx create-next-app@latest my-app
cd my-app
npm run dev

💡NOTE

Use the --typescript flag if you want to start with TypeScript support right away!

Project Structure

A typical Next.js 15 project looks like this:

Folder Structure

my-app/
├── app/
│   ├── layout.js
│   ├── page.js
│   └── globals.css
├── public/
│   └── images/
├── components/
│   └── Button.jsx
├── next.config.js
└── package.json

The App Directory

The new App Router uses the app directory for file-based routing:

JAVASCRIPT

// app/page.js - Home page
export default function Home() {
  return (
    <main>
      <h1>Welcome to Next.js 15!</h1>
      <p>Building amazing web apps has never been easier.</p>
    </main>
  );
}

Creating Pages

Creating a new page is as simple as adding a file:

JAVASCRIPT

// app/about/page.js
export const metadata = {
  title: 'About Us',
  description: 'Learn more about our company',
};
 
export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>We build amazing web applications!</p>
    </div>
  );
}

💡NOTE

The new metadata API makes SEO optimization easier than ever. Simply export a metadata object from your page components!

Server vs Client Components

Next.js 15 introduces a clear distinction between Server and Client Components:

Server Components (Default)

JAVASCRIPT

// app/posts/page.js
async function getPosts() {
  const res = await fetch('https://api.example.com/posts');
  return res.json();
}
 
export default async function Posts() {
  const posts = await getPosts();
  
  return (
    <div>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  );
}

Client Components

Use 'use client' for interactive components:

JAVASCRIPT

'use client';
 
import { useState } from 'react';
 
export default function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

💡TIP

Only use 'use client' when you need interactivity. Server Components are more performant and provide better SEO!

Data Fetching

Next.js 15 makes data fetching incredibly powerful:

Static Data Fetching

JAVASCRIPT

async function getStaticData() {
  const res = await fetch('https://api.example.com/data', {
    next: { revalidate: 3600 } // Revalidate every hour
  });
  return res.json();
}

Dynamic Data Fetching

JAVASCRIPT

async function getDynamicData() {
  const res = await fetch('https://api.example.com/data', {
    cache: 'no-store' // Always fetch fresh data
  });
  return res.json();
}

Styling Options

Next.js supports multiple styling solutions:

CSS Modules

CSS

/* styles/Button.module.css */
.button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: transform 0.2s;
}
 
.button:hover {
  transform: translateY(-2px);
}

JAVASCRIPT

import styles from './Button.module.css';
 
export default function Button({ children }) {
  return (
    <button className={styles.button}>
      {children}
    </button>
  );
}

Tailwind CSS

Next.js works great with Tailwind:

JAVASCRIPT

export default function Hero() {
  return (
    <div className="bg-linear-to-r from-purple-500 to-pink-500 py-20 px-6">
      <h1 className="text-5xl font-bold text-white mb-4">
        Welcome to Next.js 15
      </h1>
      <p className="text-xl text-white/90">
        Build amazing web applications
      </p>
    </div>
  );
}

API Routes

Create serverless API endpoints easily:

JAVASCRIPT

// app/api/hello/route.js
export async function GET(request) {
  return Response.json({ message: 'Hello from Next.js!' });
}
 
export async function POST(request) {
  const data = await request.json();
  // Process the data
  return Response.json({ success: true, data });
}

💡NOTE

API routes are perfect for handling form submissions, webhooks, and small backend tasks!

Image Optimization

Next.js automatically optimizes images:

JAVASCRIPT

import Image from 'next/image';
 
export default function Gallery() {
  return (
    <div>
      <Image
        src="/hero.jpg"
        alt="Hero Image"
        width={1200}
        height={600}
        priority
      />
    </div>
  );
}

Deployment

Deploying to Vercel is the easiest option:

BASH

# Install Vercel CLI
npm install -g vercel
 
# Deploy
vercel

💡NOTE

Next.js can also be deployed to any platform that supports Node.js, including AWS, Digital Ocean, and your own servers!

Performance Optimization Tips

Use Server Components by default - Only use Client Components when needed
Implement Code Splitting - Next.js does this automatically!
Optimize Images - Always use the next/image component
Enable Caching - Use ISR (Incremental Static Regeneration) where appropriate
Bundle Analysis - Use @next/bundle-analyzer to identify large dependencies

JAVASCRIPT

// next.config.js
module.exports = {
  images: {
    domains: ['example.com'],
    formats: ['image/webp', 'image/avif'],
  },
  compress: true,
  poweredByHeader: false,
};

Common Patterns

Protected Routes

JAVASCRIPT

// middleware.js
import { NextResponse } from 'next/server';
 
export function middleware(request) {
  const token = request.cookies.get('token');
  
  if (!token) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  
  return NextResponse.next();
}
 
export const config = {
  matcher: '/dashboard/:path*',
};

Error Handling

JAVASCRIPT

// app/error.js
'use client';
 
export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={() => reset()}>Try again</button>
    </div>
  );
}

Conclusion

Next.js 15 is an incredibly powerful framework that makes building modern web applications a joy. With its excellent developer experience, powerful features, and amazing performance, it's no wonder Next.js has become so popular!

💡NOTE

Ready to dive deeper? Check out the official Next.js documentation and start building your next project!

Happy coding! 🚀

Why Next.js?

Key Features

Installation

Project Structure

The App Directory

Creating Pages

Server vs Client Components

Server Components (Default)

Client Components

Data Fetching

Static Data Fetching

Dynamic Data Fetching

Styling Options

CSS Modules

Tailwind CSS

API Routes

Image Optimization

Deployment

Performance Optimization Tips

Common Patterns

Protected Routes

Error Handling

Conclusion

About the Author