Next.js

Introduction to Next.js 15

By Refactor Team

Introduction to Next.js 15

Next.js 15 marks an important milestone in the React ecosystem, bringing significant improvements in performance, developer experience, and new features that make building modern web applications easier.

What is Next.js?

Next.js is a React framework that allows you to build fast and scalable web applications with server-side rendering (SSR), static site generation (SSG), and much more.

Main Features of Next.js 15

1. Stable Turbopack

Turbopack, Vercel's new bundler written in Rust, is now stable in Next.js 15:

# Use Turbopack in development
npm run dev --turbo

Benefits:

  • ⚡ Builds up to 5x faster
  • 🔥 Instant Hot Module Replacement
  • 📦 Better dependency handling
  • 🎯 Lower memory usage

2. Full React 19 Support

Next.js 15 includes native support for React 19:

// Improved Server Actions
'use server'

export async function createUser(formData: FormData) {
  const name = formData.get('name');
  const email = formData.get('email');

  await db.users.create({ name, email });
}

// Usage in component
export default function SignupForm() {
  return (
    <form action={createUser}>
      <input name="name" required />
      <input name="email" type="email" required />
      <button type="submit">Sign Up</button>
    </form>
  );
}

3. Improved App Router

The App Router continues to evolve with improvements in:

Parallel Routes

Render multiple pages in the same layout:

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
  team,
  analytics
}: {
  children: React.ReactNode;
  team: React.ReactNode;
  analytics: React.ReactNode;
}) {
  return (
    <div>
      <div>{children}</div>
      <div className="grid grid-cols-2 gap-4">
        <div>{team}</div>
        <div>{analytics}</div>
      </div>
    </div>
  );
}

Intercepting Routes

Intercept navigations to show modals or previews:

// app/photos/(..)photo/[id]/page.tsx
export default function PhotoModal({ params }: { params: { id: string } }) {
  return (
    <div className="modal">
      <Image src={`/photos/${params.id}`} />
    </div>
  );
}

4. Image Optimization

Improvements to the Image component:

import Image from 'next/image';

export default function Gallery() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero"
      width={800}
      height={600}
      priority // Priority loading
      placeholder="blur" // Blur placeholder
      blurDataURL="/hero-blur.jpg"
    />
  );
}

5. Partial Prerendering (Experimental)

Combines the best of SSR and SSG:

// next.config.js
module.exports = {
  experimental: {
    ppr: true
  }
}

// The page is statically generated,
// but dynamic parts are rendered on the server
export default function ProductPage() {
  return (
    <div>
      <StaticHeader /> {/* Static */}
      <DynamicPrice /> {/* Dynamic */}
      <StaticReviews /> {/* Static */}
    </div>
  );
}

Migrating to Next.js 15

Update Dependencies

npm install next@15 react@19 react-dom@19

Important Changes

  1. Node.js 18.17+ is now the minimum required
  2. React 19 brings changes to hook behavior
  3. Turbopack is the new default in development

Migration Example

// Before (Pages Router)
export async function getServerSideProps() {
  const data = await fetchData();
  return { props: { data } };
}

// After (App Router)
async function getData() {
  const data = await fetchData();
  return data;
}

export default async function Page() {
  const data = await getData();
  return <div>{/* Render data */}</div>;
}

Best Practices

1. Use Server Components by Default

// app/page.tsx (Server Component by default)
async function getData() {
  const res = await fetch('https://api.example.com/data');
  return res.json();
}

export default async function Page() {
  const data = await getData();
  return <main>{/* UI */}</main>;
}

2. Client Components Only When Necessary

'use client' // Only for interactivity

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

3. Leverage Automatic Caching

// Fetch with automatic caching
const data = await fetch('https://api.example.com/data', {
  next: { revalidate: 3600 } // Revalidate every hour
});

Performance

Next.js 15 significantly improves performance:

  • 📉 40% less JavaScript on the client
  • ⚡ 50% faster in development with Turbopack
  • 🎯 Better Core Web Vitals automatically

Conclusion

Next.js 15 consolidates the App Router as the way forward, dramatically improves the development experience with Turbopack, and sets the stage for React's future with full React 19 support.

Additional Resources

Now is the perfect time to start or migrate to Next.js 15!

#Next.js#React#JavaScript