Exploring New Features in Next.js 15

Introduction

Next.js 15 introduces several exciting new features to enhance the development experience. This guide will walk you through some of the most notable features.

Page 1. Setup and Key Features
 

Step 1. Prerequisites

Ensure you have Node.js and npm (or Yarn) installed. Download Node.js from the official website.

Step 2. Installing Next.js 15

1. Open your terminal.
2. Create a new project.

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

Navigate to the project directory.

cd my-nextjs15-app

Step 3. Enhanced Image Optimization

Open pages/index.js and use the next/image component.

import Image from 'next/image';

export default function Home() {
  return (
    <div>
      <h1>Welcome to Next.js 15</h1>
      <Image
        src="/images/sample.jpg"
        alt="Sample Image"
        width={500}
        height={500}
        priority
      />
    </div>
  );
}

Add an image to public/images (e.g., sample.jpg).

Run the server

npm run dev

Navigate to http://localhost:3000 to see the optimized image.

Step 4. Middleware Enhancements

Create middleware.js in the root directory.

import { NextResponse } from 'next/server';

export function middleware(req) {
  const url = req.nextUrl.clone();
  
  if (url.pathname === '/') {
    url.pathname = '/welcome';
    return NextResponse.redirect(url);
  }
  
  return NextResponse.next();
}

Create pages/welcome.js

export default function Welcome() {
  return (
    <div>
      <h1>Welcome Page</h1>
      <p>You have been redirected here!</p>
    </div>
  );
}

Run the server and navigate to http://localhost:3000 to see the redirection.

Page 2. Advanced Features and Deployment
 

Step 5. Improved Data Fetching with getServerSideProps

Create pages/ssr.js

export async function getServerSideProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

export default function SSR({ posts }) {
  return (
    <div>
      <h1>Server Side Rendered Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

Run the server and navigate to http://localhost:3000/ssr to see the posts.

Step 6. New app Directory Structure

Create an app directory.

mkdir app

Move page contents to the app.

mv pages/* app/

Update imports to reflect the new structure.

Step 7. Deploying Your Next.js 15 Application

• Push your code to a Git repository.
• Deploy to Vercel.
  • Go to Vercel.
  • Sign in or sign up.
  • Click "New Project" and import your repository.
  • Follow the prompts to deploy.

Summary

Next.js 15 brings new features and improvements, including enhanced image optimization, middleware enhancements, improved data fetching, and a new app directory structure. Continue exploring the Next.js documentation for more advanced features and use cases.