# Nextjs Development
> Comprehensive Next.js development skill covering App Router, Server Components, data fetching, routing patterns, API routes, middleware, and full-stack Next.js applications
- Skill: `manutej/nextjs-development` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add manutej/nextjs-development`
- Raw SKILL.md: https://api.skillmd.com/api/skills/manutej/nextjs-development/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: manutej (https://skillmd.com/u/manutej)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/manutej/nextjs-development
---
# Next.js Development Skill
This skill provides comprehensive guidance for building modern Next.js applications using the App Router, Server Components, data fetching patterns, routing, API routes, middleware, and full-stack development techniques based on official Next.js documentation.
## When to Use This Skill
Use this skill when:
- Building full-stack React applications with server-side rendering (SSR)
- Creating static sites with incremental static regeneration (ISR)
- Developing modern web applications with React Server Components
- Building API backends with serverless route handlers
- Implementing SEO-optimized applications with metadata and Open Graph
- Creating production-ready web applications with built-in optimization
- Building e-commerce, blogs, dashboards, or content-driven sites
- Implementing authentication, data fetching, and complex routing patterns
- Optimizing images, fonts, and performance automatically
- Deploying serverless applications with edge computing capabilities
## Core Concepts
### App Router
The App Router is Next.js's modern routing system built on React Server Components. It uses the `app` directory for file-based routing with enhanced features.
**Basic App Structure:**
```
app/
├── layout.tsx # Root layout (required)
├── page.tsx # Home page
├── loading.tsx # Loading UI
├── error.tsx # Error UI
├── not-found.tsx # 404 page
├── about/
│ └── page.tsx # /about route
└── blog/
├── page.tsx # /blog route
├── [slug]/
│ └── page.tsx # /blog/[slug] dynamic route
└── layout.tsx # Blog layout
```
**Root Layout (Required):**
```tsx
// app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
{children}
)
}
```
**Page Component:**
```tsx
// app/page.tsx
export default function HomePage() {
return (
Welcome to Next.js
Building modern web applications
)
}
```
### Server Components
Server Components are React components that render on the server. They are the default in the App Router and provide better performance.
**Server Component (Default):**
```tsx
// app/posts/page.tsx
async function getPosts() {
const res = await fetch('https://api.example.com/posts', {
cache: 'force-cache' // Static generation
})
return res.json()
}
export default async function PostsPage() {
const posts = await getPosts()
return (
)
}
```
**Mixing Server and Client Components:**
```tsx
// app/dashboard/page.tsx (Server Component)
import ClientCounter from './ClientCounter'
async function getData() {
const res = await fetch('https://api.example.com/data')
return res.json()
}
export default async function DashboardPage() {
const data = await getData()
return (
Dashboard
Server data: {data.value}
{/* Client component for interactivity */}
)
}
```
### Data Fetching
Next.js extends the native `fetch()` API with automatic caching and revalidation.
**Static Data Fetching (Default):**
```tsx
async function getStaticData() {
const res = await fetch('https://api.example.com/data', {
cache: 'force-cache' // Default, equivalent to getStaticProps
})
return res.json()
}
export default async function Page() {
const data = await getStaticData()
return
{data.title}
}
```
**Dynamic Data Fetching:**
```tsx
async function getDynamicData() {
const res = await fetch('https://api.example.com/data', {
cache: 'no-store' // Equivalent to getServerSideProps
})
return res.json()
}
export default async function Page() {
const data = await getDynamicData()
return
{data.title}
}
```
**Revalidation (ISR):**
```tsx
async function getRevalidatedData() {
const res = await fetch('https://api.example.com/data', {
next: { revalidate: 60 } // Revalidate every 60 seconds
})
return res.json()
}
export default async function Page() {
const data = await getRevalidatedData()
return
{data.title}
}
```
**Parallel Data Fetching:**
```tsx
async function getUser(id: string) {
const res = await fetch(`https://api.example.com/users/${id}`)
return res.json()
}
async function getUserPosts(id: string) {
const res = await fetch(`https://api.example.com/users/${id}/posts`)
return res.json()
}
export default async function UserPage({ params }: { params: { id: string } }) {
// Fetch in parallel
const [user, posts] = await Promise.all([
getUser(params.id),
getUserPosts(params.id)
])
return (
{user.name}
{posts.map((post) => (
{post.title}
))}
)
}
```
**Sequential Data Fetching:**
```tsx
async function getUser(id: string) {
const res = await fetch(`https://api.example.com/users/${id}`)
return res.json()
}
async function getRecommendations(preferences: string[]) {
const res = await fetch('https://api.example.com/recommendations', {
method: 'POST',
body: JSON.stringify({ preferences })
})
return res.json()
}
export default async function UserPage({ params }: { params: { id: string } }) {
// First fetch user
const user = await getUser(params.id)
// Then fetch recommendations based on user data
const recommendations = await getRecommendations(user.preferences)
return (
{user.name}
Recommendations
{recommendations.map((item) => (
{item.title}
))}
)
}
```
### Routing
Next.js uses file-system based routing in the `app` directory.
**Dynamic Routes:**
```tsx
// app/blog/[slug]/page.tsx
export default function BlogPost({ params }: { params: { slug: string } }) {
return
Post: {params.slug}
}
// Generates static pages for these slugs at build time
export async function generateStaticParams() {
const posts = await fetch('https://api.example.com/posts').then(r => r.json())
return posts.map((post) => ({
slug: post.slug,
}))
}
```
**Catch-All Routes:**
```tsx
// app/docs/[...slug]/page.tsx
export default function DocsPage({ params }: { params: { slug: string[] } }) {
// /docs/a/b/c -> params.slug = ['a', 'b', 'c']
return
)
}
```
**Responsive Images:**
```tsx
import Image from 'next/image'
export default function Page() {
return (
)
}
```
### Font Optimization
Next.js automatically optimizes fonts with `next/font`.
**Google Fonts:**
```tsx
// app/layout.tsx
import { Inter, Roboto_Mono } from 'next/font/google'
const inter = Inter({
subsets: ['latin'],
display: 'swap',
})
const robotoMono = Roboto_Mono({
subsets: ['latin'],
display: 'swap',
variable: '--font-roboto-mono',
})
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
)
}
```
**Local Fonts:**
```tsx
// app/layout.tsx
import localFont from 'next/font/local'
const myFont = localFont({
src: './fonts/my-font.woff2',
display: 'swap',
variable: '--font-my-font',
})
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
)
}
```
## Workflow Patterns
### Creating a New Page
1. Create a new folder in `app` directory
2. Add a `page.tsx` file
3. Export a default component
4. Optionally add layout, loading, and error files
```tsx
// app/products/page.tsx
export default function ProductsPage() {
return
Products
}
// app/products/layout.tsx
export default function ProductsLayout({ children }: { children: React.ReactNode }) {
return (
{children}
)
}
// app/products/loading.tsx
export default function Loading() {
return
Loading products...
}
```
### Server Actions
Server Actions allow you to run server-side code directly from client components.
**Form with Server Action:**
```tsx
// app/actions.ts
'use server'
import { revalidatePath } from 'next/cache'
export async function createPost(formData: FormData) {
const title = formData.get('title') as string
const content = formData.get('content') as string
await db.post.create({
data: { title, content }
})
revalidatePath('/posts')
}
// app/new-post/page.tsx
import { createPost } from '../actions'
export default function NewPostPage() {
return (
)
}
```
**Server Action with useTransition:**
```tsx
// app/actions.ts
'use server'
export async function updateUser(userId: string, data: UserData) {
await db.user.update({
where: { id: userId },
data,
})
return { success: true }
}
// app/profile/page.tsx
'use client'
import { useTransition } from 'react'
import { updateUser } from '../actions'
export default function ProfilePage() {
const [isPending, startTransition] = useTransition()
const handleSubmit = (formData: FormData) => {
startTransition(async () => {
await updateUser('user-id', {
name: formData.get('name') as string,
})
})
}
return (
)
}
```
### Authentication Pattern
**Basic Authentication with Middleware:**
```tsx
// lib/auth.ts
import { cookies } from 'next/headers'
import { redirect } from 'next/navigation'
export async function getSession() {
const session = cookies().get('session')?.value
if (!session) return null
return await verifySession(session)
}
export async function requireAuth() {
const session = await getSession()
if (!session) {
redirect('/login')
}
return session
}
// app/dashboard/page.tsx
import { requireAuth } from '@/lib/auth'
export default async function DashboardPage() {
const session = await requireAuth()
return (
Welcome, {session.user.name}
)
}
// app/api/login/route.ts
import { cookies } from 'next/headers'
export async function POST(request: Request) {
const { email, password } = await request.json()
const user = await validateCredentials(email, password)
if (!user) {
return Response.json({ error: 'Invalid credentials' }, { status: 401 })
}
const session = await createSession(user)
cookies().set('session', session, {
httpOnly: true,
secure: process.env.NODE_ENV === 'production',
maxAge: 60 * 60 * 24 * 7, // 1 week
})
return Response.json({ success: true })
}
```
### Database Pattern
**Prisma with Server Components:**
```tsx
// lib/db.ts
import { PrismaClient } from '@prisma/client'
const globalForPrisma = global as unknown as { prisma: PrismaClient }
export const prisma = globalForPrisma.prisma || new PrismaClient()
if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma
// app/posts/page.tsx
import { prisma } from '@/lib/db'
async function getPosts() {
return await prisma.post.findMany({
orderBy: { createdAt: 'desc' },
include: { author: true },
})
}
export default async function PostsPage() {
const posts = await getPosts()
return (
{posts.map((post) => (
{post.title}
By {post.author.name}
{post.content}
))}
)
}
```
### Caching Strategies
**Revalidate on Demand:**
```tsx
// app/actions.ts
'use server'
import { revalidatePath, revalidateTag } from 'next/cache'
export async function createPost(data: PostData) {
await db.post.create({ data })
// Revalidate specific path
revalidatePath('/posts')
// Or revalidate by tag
revalidateTag('posts')
}
// Fetch with cache tags
async function getPosts() {
const res = await fetch('https://api.example.com/posts', {
next: { tags: ['posts'] }
})
return res.json()
}
```
**Time-based Revalidation:**
```tsx
async function getData() {
const res = await fetch('https://api.example.com/data', {
next: { revalidate: 3600 } // Revalidate every hour
})
return res.json()
}
```
**Route Segment Config:**
```tsx
// app/blog/page.tsx
export const revalidate = 3600 // Revalidate every hour
export const dynamic = 'force-static' // Force static generation
export const fetchCache = 'force-cache' // Force cache for all fetch requests
export default async function BlogPage() {
const posts = await getPosts()
return
{/* ... */}
}
```
## Best Practices
### 1. Use Server Components by Default
Server Components are the default and provide better performance. Only use Client Components when needed.
```tsx
// ✅ Good - Server Component
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
{data.title}
}
// ✅ Good - Client Component only when needed
'use client'
import { useState } from 'react'
export default function Counter() {
const [count, setCount] = useState(0)
return
}
```
### 2. Fetch Data Where You Need It
Don't prop-drill data. Fetch data in the component that needs it.
```tsx
// ✅ Good - Fetch where needed
async function Header() {
const user = await getUser()
return
}
export default function Page() {
return (
<>
)
}
```
### 3. Use Parallel Data Fetching
Fetch data in parallel when possible to reduce loading time.
```tsx
// ✅ Good - Parallel fetching
export default async function Page() {
const [user, posts] = await Promise.all([
getUser(),
getPosts()
])
return
{/* ... */}
}
```
### 4. Optimize Images
Always use the Image component for automatic optimization.
```tsx
// ✅ Good
import Image from 'next/image'
// ❌ Bad
```
### 5. Use Metadata API for SEO
Define metadata for every page.
```tsx
// ✅ Good
export const metadata = {
title: 'My Page',
description: 'Page description',
}
export default function Page() {
return
)
}
// app/dashboard/page.tsx
import { Suspense } from 'react'
import Stats from './Stats'
import RecentActivity from './RecentActivity'
import Chart from './Chart'
export default function DashboardPage() {
return (
Dashboard
Loading stats...
}>
Loading chart...
}>
Loading activity...}>
)
}
```
## Summary
This Next.js development skill covers:
1. **App Router**: Modern routing with file-based system
2. **Server Components**: Default server-side rendering for better performance
3. **Data Fetching**: Extended fetch API with caching and revalidation
4. **Routing**: Dynamic routes, catch-all routes, route groups, parallel routes
5. **Layouts**: Nested layouts, templates, and layout composition
6. **Loading States**: Automatic loading UI with Suspense
7. **Error Handling**: Error boundaries and not-found pages
8. **API Routes**: Route handlers with Web APIs
9. **Middleware**: Request interception and modification
10. **Metadata**: SEO optimization with Metadata API
11. **Image Optimization**: Automatic image optimization with Image component
12. **Font Optimization**: Automatic font loading with next/font
13. **Server Actions**: Server-side mutations from client components
14. **Authentication**: Session management and protected routes
15. **Best Practices**: Performance optimization, caching strategies, and common patterns
All patterns are based on official Next.js documentation (Trust Score: 10) and represent modern Next.js 13+ App Router development practices.
```
### 5. Use Metadata API for SEO
Define metadata for every page.
```tsx
// ✅ Good
export const metadata = {
title: 'My Page',
description: 'Page description',
}
export default function Page() {
return