Complete Next.js 15 Guide

// app/blog/[slug]/page.tsx
type Props = {
  params: Promise<{ slug: string }>;
};

export default async function BlogPost({ params }: Props) {
  const { slug } = await params;
  const post = await getPost(slug);

  return <article>{post.content}</article>;
}

// Generate static params at build time
export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map(post => ({ slug: post.slug }));
}

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="flex">
      <Sidebar /> {/* Shared sidebar */}
      <main className="flex-1">
        {children} {/* Page content */}
      </main>
    </div>
  );
}

import Link from 'next/link';
import { useRouter } from 'next/navigation';

// Declarative navigation
<Link href="/blog/nextjs-guide">Read Guide</Link>

// Programmatic navigation
function NavigateButton() {
  const router = useRouter();

  return (
    <button onClick={() => router.push('/dashboard')}>
      Go to Dashboard
    </button>
  );
}

// Server Component - async by default
async function UserProfile({ userId }: { userId: string }) {
  // Fetches are automatically cached
  const user = await fetch(`https://api.example.com/users/${userId}`);

  // Or fetch from database directly
  const posts = await db.post.findMany({
    where: { authorId: userId },
    orderBy: { createdAt: 'desc' },
  });

  return (
    <div>
      <h1>{user.name}</h1>
      <PostList posts={posts} />
    </div>
  );
}

// Parallel fetching - starts at the same time
async function Dashboard() {
  const userPromise = getUser();
  const postsPromise = getPosts();
  const statsPromise = getStats();

  // Wait for all promises
  const [user, posts, stats] = await Promise.all([
    userPromise,
    postsPromise,
    statsPromise,
  ]);

  return <DashboardUI user={user} posts={posts} stats={stats} />;
}

// Sequential fetching - when data depends on previous result
async function UserPosts({ userId }: { userId: string }) {
  const user = await getUser(userId);
  // Fetch posts only after getting user
  const posts = await getPosts(user.region);

  return <PostsList posts={posts} />;
}

import { Suspense } from 'react';

export default function Page() {
  return (
    <>
      <Header /> {/* Shows immediately */}

      <Suspense fallback={<Skeleton />}>
        <SlowComponent /> {/* Streams in when ready */}
      </Suspense>

      <Suspense fallback={<Skeleton />}>
        <AnotherSlowComponent /> {/* Also streams independently */}
      </Suspense>

      <Footer /> {/* Shows immediately */}
    </>
  );
}

// Time-based revalidation
export const revalidate = 3600; // Revalidate every hour

// On-demand revalidation
import { revalidatePath, revalidateTag } from 'next/cache';

export async function updatePost(id: string) {
  await db.post.update({ where: { id }, data: { ... } });

  // Revalidate specific path
  revalidatePath('/blog');

  // Or revalidate by cache tag
  revalidateTag('posts');
}

// Tagged fetch for granular control
const posts = await fetch('https://api.example.com/posts', {
  next: { tags: ['posts'], revalidate: 60 }
});

// app/api/posts/route.ts
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
  const posts = await db.post.findMany();
  return NextResponse.json(posts);
}

export async function POST(request: Request) {
  const body = await request.json();
  const post = await db.post.create({ data: body });
  return NextResponse.json(post, { status: 201 });
}

// Dynamic route: app/api/posts/[id]/route.ts
export async function GET(
  request: Request,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params;
  const post = await db.post.findUnique({ where: { id } });

  if (!post) {
    return NextResponse.json({ error: 'Not found' }, { status: 404 });
  }

  return NextResponse.json(post);
}

// app/actions.ts
'use server'

import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';

export async function createPost(formData: FormData) {
  // Validate input
  const title = formData.get('title') as string;
  const content = formData.get('content') as string;

  if (!title || !content) {
    return { error: 'Title and content are required' };
  }

  // Create post
  const post = await db.post.create({
    data: { title, content, authorId: '...' }
  });

  // Revalidate cache
  revalidatePath('/blog');

  // Redirect to new post
  redirect(`/blog/${post.slug}`);
}

// Usage in Client Component
'use client'

import { useFormStatus } from 'react-dom';
import { createPost } from './actions';

export function CreatePostForm() {
  return (
    <form action={createPost}>
      <input name="title" required />
      <textarea name="content" required />
      <SubmitButton />
    </form>
  );
}

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Creating...' : 'Create Post'}
    </button>
  );
}

'use client'

import { useOptimistic } from 'react';
import { addTodo } from './actions';

export function TodoList({ todos }: { todos: Todo[] }) {
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (state, newTodo: string) => [
      ...state,
      { id: Date.now(), text: newTodo, pending: true }
    ]
  );

  async function formAction(formData: FormData) {
    const text = formData.get('todo') as string;
    addOptimisticTodo(text); // Update UI immediately
    await addTodo(text); // Save to server
  }

  return (
    <>
      <form action={formAction}>
        <input name="todo" />
        <button type="submit">Add</button>
      </form>

      <ul>
        {optimisticTodos.map(todo => (
          <li key={todo.id} className={todo.pending ? 'opacity-50' : ''}>
            {todo.text}
          </li>
        ))}
      </ul>
    </>
  );
}

import Image from 'next/image';

// Automatic optimization and lazy loading
<Image
  src="/hero.jpg"
  alt="Hero image"
  width={1200}
  height={600}
  priority // Load above-the-fold images immediately
  placeholder="blur" // Show blur placeholder while loading
/>

// Responsive images
<Image
  src="/product.jpg"
  alt="Product"
  fill // Fill parent container
  sizes="(max-width: 768px) 100vw, 50vw"
  className="object-cover"
/>

import dynamic from 'next/dynamic';

// Load component lazily with loading state
const HeavyChart = dynamic(() => import('./HeavyChart'), {
  loading: () => <ChartSkeleton />,
  ssr: false // Client-side only
});

// Load third-party library only when needed
const DynamicModal = dynamic(() => import('./Modal'));

export default function Dashboard() {
  const [showModal, setShowModal] = useState(false);

  return (
    <>
      <button onClick={() => setShowModal(true)}>
        Open Modal
      </button>

      {/* Modal code only loaded when opened */}
      {showModal && <DynamicModal onClose={() => setShowModal(false)} />}
    </>
  );
}

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPost(slug);

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [{ url: post.coverImage }],
      type: 'article',
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
  };
}