Menรผ
Next.js 16 App Router patterns and best practices for this project
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fรผgen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prรผfen und installieren.
Basierend auf der SOC-Berufsklassifikation
| name | nextjs |
| description | Next.js 16 App Router patterns and best practices for this project |
This project uses Next.js 16.1.4 with the App Router, TypeScript, and Tailwind CSS. Next.js 16 brings significant performance improvements with Turbopack as the default bundler and built-in React Compiler support.
Detected Version: Next.js 16.1.4 Router: App Router (default) Language: TypeScript 5.x Styling: Tailwind CSS 4.x Node.js: 20.9+ required
Key Files:
next.config.ts - Next.js configuration (TypeScript)src/app/layout.tsx - Root layout with metadatasrc/app/page.tsx - Home pagesrc/app/globals.css - Global stylestsconfig.json - TypeScript configuration with Next.js pluginsrc/app/
โโโ layout.tsx # Root layout (required)
โโโ page.tsx # Home route (/)
โโโ globals.css # Global styles
โโโ favicon.ico # Site favicon
โโโ tasks/ # Example nested route
โโโ page.tsx # /tasks route
| File | Purpose | Required |
|---|---|---|
layout.tsx | Shared UI for route segment | Yes (root) |
page.tsx | Route UI, makes route publicly accessible | Yes |
loading.tsx | Loading UI with Suspense | No |
error.tsx | Error UI boundary | No |
not-found.tsx | 404 UI | No |
By default, all components in the App Router are Server Components:
// src/app/page.tsx (Server Component by default)
export default function Home() {
// Runs on server only
// Can directly access backend resources
// Cannot use hooks or event handlers
return <div>Server-rendered content</div>;
}
Benefits:
Use 'use client' directive when you need:
useState, useEffect, etc.)onClick, onChange, etc.)'use client'; // Must be at the top of the file
import { useState } from 'react';
export default function TaskInput() {
const [value, setValue] = useState('');
return (
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
);
}
// src/app/page.tsx (Server Component)
import TaskList from '@/components/TaskList'; // Client component
export default function Home() {
// Server logic here
return (
<main>
<h1>Task Manager</h1>
<TaskList /> {/* Client interactivity isolated here */}
</main>
);
}
Rule: Keep Server Components as far up the tree as possible, only use Client Components where interactivity is needed.
// src/app/layout.tsx
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Task Manager',
description: 'A simple task management app',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
Dynamic Metadata:
// src/app/tasks/[id]/page.tsx
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const task = await getTask(params.id);
return { title: task.description };
}
src/
โโโ app/ # App Router pages
โ โโโ layout.tsx
โ โโโ page.tsx
โ โโโ globals.css
โโโ components/ # React components
โ โโโ ui/ # Generic UI components
โ โโโ layout/ # Layout components
โ โโโ features/ # Feature-specific components
โโโ lib/ # Utilities and types
โโโ types.ts
โโโ utils.ts
Best Practice: Use @/ import alias (configured in tsconfig.json):
import { Task } from '@/lib/types';
import TaskInput from '@/components/TaskInput';
Next.js 16 includes automatic font optimization with next/font:
// src/app/layout.tsx
import { Geist, Geist_Mono } from 'next/font/google';
const geistSans = Geist({
variable: '--font-geist-sans',
subsets: ['latin'],
});
const geistMono = Geist_Mono({
variable: '--font-geist-mono',
subsets: ['latin'],
});
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={`${geistSans.variable} ${geistMono.variable}`}>
{children}
</body>
</html>
);
}
import Image from 'next/image';
<Image
src="/task-icon.png"
alt="Task icon"
width={24}
height={24}
priority // For above-the-fold images
/>
// Global styles in src/app/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
// Component-level Tailwind classes
<div className="flex min-h-screen items-center justify-center bg-zinc-50">
<main className="max-w-3xl w-full px-4">
{/* Content */}
</main>
</div>
Turbopack is now the default bundler in Next.js 16:
Enable filesystem caching for even faster rebuilds:
// next.config.ts
export default {
experimental: {
turbopackFileSystemCacheForDev: true,
},
};
React Compiler is stable in Next.js 16:
useMemo, useCallback// No need for useMemo anymore - React Compiler handles it
const filteredTasks = tasks.filter(task => {
if (filter === 'active') return !task.completed;
if (filter === 'completed') return task.completed;
return true;
});
// Async components (Server Components)
export default async function TasksPage() {
const tasks = await fetchTasks(); // Direct async/await
return <TaskList tasks={tasks} />;
}
Before deploying:
npm run build to check for build errorsstrict: true in tsconfig.json)npm run build# Development server (Turbopack)
npm run dev
# Production build
npm run build
# Start production server
npm run start
# Linting
npm run lint
'use client';
export default function BadComponent() {
const data = await fetch('/api/tasks'); // โ async/await in Client Component
return <div>{data}</div>;
}
// Server Component
async function TasksPage() {
const tasks = await fetchTasks(); // โ
Server-side data fetching
return <TaskList tasks={tasks} />; // Pass to Client Component
}
// Client Component
'use client';
function TaskList({ tasks }: { tasks: Task[] }) {
const [filter, setFilter] = useState('all'); // โ
Client-side state
// ...
}
'use client'; // โ Unnecessary if no interactivity
export default function StaticContent() {
return <div>Just static content</div>;
}
// No 'use client' needed - Server Component by default
export default function StaticContent() {
return <div>Static content</div>; // โ
Zero JS sent to client
}
// Server Component
import ClientComponent from './ClientComponent'; // Client Component
export default function Page() {
// โ Passing non-serializable data to Client Component
return <ClientComponent callback={() => console.log('test')} />;
}
// Server Component
export default function Page() {
// โ
Pass serializable data only
return <ClientComponent data={{ id: 1, name: 'Task' }} />;
}