Next.js App Router Best Practices

Next.js 14+ with Vercel optimization patterns.

Instructions

1. App Router Structure

app/
├── layout.tsx          # Root layout
├── page.tsx            # Home page
├── loading.tsx         # Loading UI
├── error.tsx           # Error UI
├── not-found.tsx       # 404 page
├── (auth)/             # Route group
│   ├── login/
│   └── register/
└── api/
    └── users/
        └── route.ts    # API route

2. Server vs Client Components

// ✅ Server Component (default) - no directive
async function UserList() {
  const users = await getUsers(); // Direct DB access
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

// ✅ Client Component - needs interactivity
'use client';
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

3. Prevent Request Waterfall

// ❌ Bad - sequential (waterfall)
async function Page() {
  const user = await getUser();
  const posts = await getPosts(user.id);
  const comments = await getComments(posts[0].id);
  return ...;
}

// ✅ Good - parallel with Promise.all
async function Page() {
  const [user, posts] = await Promise.all([
    getUser(),
    getPosts()
  ]);
  return ...;
}

// ✅ Good - defer non-critical
async function Page() {
  const user = await getUser();
  const postsPromise = getPosts(user.id); // Don't await yet
  
  return (
    <div>
      <UserProfile user={user} />
      <Suspense fallback={<PostsSkeleton />}>
        <Posts promise={postsPromise} />
      </Suspense>
    </div>
  );
}

4. No Barrel Files (Bundle Optimization)

// ❌ Bad - barrel file imports entire module
import { Button, Card } from '@/components';

// ✅ Good - direct imports
import { Button } from '@/components/Button';
import { Card } from '@/components/Card';

5. Dynamic Imports

// ✅ Lazy load heavy components
import dynamic from 'next/dynamic';

const HeavyChart = dynamic(() => import('@/components/Chart'), {
  loading: () => <ChartSkeleton />,
  ssr: false
});

6. Server Actions

// app/actions.ts
'use server';

import { revalidatePath } from 'next/cache';

export async function createPost(formData: FormData) {
  const title = formData.get('title');
  
  await db.post.create({ data: { title } });
  
  revalidatePath('/posts');
}

// Usage in component
<form action={createPost}>
  <input name="title" />
  <button type="submit">Create</button>
</form>

7. Caching Strategies

// ✅ React.cache for request deduplication
import { cache } from 'react';

export const getUser = cache(async (id: string) => {
  return await db.user.findUnique({ where: { id } });
});

// ✅ Next.js fetch cache
const data = await fetch(url, {
  next: { revalidate: 3600 } // Revalidate hourly
});

// ✅ Static generation
export const dynamic = 'force-static';

8. Metadata

// Static metadata
export const metadata: Metadata = {
  title: 'My App',
  description: 'Description...'
};

// Dynamic metadata
export async function generateMetadata({ params }): Promise<Metadata> {
  const product = await getProduct(params.id);
  return { title: product.name };
}

References

• Next.js Documentation
• Vercel Blog