Kenhuang Academy
  • English

      • Next.js Best Practices

      Overview

      Following best practices improves code quality, performance, and maintainability.

      Project Structure

      app/
  ├── (auth)/
  │   ├── login/
  │   └── register/
  ├── (dashboard)/
  │   ├── layout.tsx
  │   └── page.tsx
  ├── api/
  ├── layout.tsx
  └── page.tsx
components/
  ├── ui/
  ├── forms/
  └── layouts/
lib/
  ├── utils.ts
  ├── db.ts
  └── auth.ts
public/
  ├── images/
  └── fonts/

      Performance Optimization

      1. Use Server Components

      // ✅ 默认使用服务端组件
export default async function Page() {
  const data = await getData()
  return <div>{data.title}</div>
}

// ❌ 避免不必要的客户端组件
'use client'
export default function Page() {
  return <div>静态内容</div>
}

      2. Code Splitting

      import dynamic from 'next/dynamic'

const HeavyComponent = dynamic(() => import('@/components/Heavy'), {
  loading: () => <Skeleton />,
  ssr: false,
})

      3. Image Optimization

      import Image from 'next/image'

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority
  placeholder="blur"
/>

      Code Quality

      1. TypeScript

      // 使用类型定义
interface User {
  id: string
  name: string
  email: string
}

async function getUser(id: string): Promise<User> {
  const res = await fetch(`/api/users/${id}`)
  return res.json()
}

      2. Error Handling

      // app/page.tsx
export default async function Page() {
  try {
    const data = await getData()
    return <div>{data.title}</div>
  } catch (error) {
    return <ErrorComponent error={error} />
  }
}

      3. Data Validation

      import { z } from 'zod'

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
})

export async function POST(request: Request) {
  const body = await request.json()
  const result = schema.safeParse(body)
  
  if (!result.success) {
    return Response.json({ error: result.error }, { status: 400 })
  }
  
  // 处理有效数据
}

      SEO Optimization

      1. Metadata

      export const metadata = {
  title: '页面标题',
  description: '页面描述',
  openGraph: {
    title: '页面标题',
    description: '页面描述',
    images: ['/og-image.jpg'],
  },
}

      2. Semantic HTML

      <article>
  <header>
    <h1>文章标题</h1>
    <time dateTime="2024-01-01">2024年1月1日</time>
  </header>
  <section>
    <p>文章内容</p>
  </section>
</article>

      Security

      1. Environment Variables

      # .env.local
DATABASE_URL="postgresql://..."
JWT_SECRET="your-secret"

# 客户端变量使用 NEXT_PUBLIC_ 前缀
NEXT_PUBLIC_API_URL="https://api.example.com"

      2. API Protection

      // middleware.ts
export function middleware(request: Request) {
  const token = request.headers.get('Authorization')
  
  if (!token) {
    return Response.json({ error: 'Unauthorized' }, { status: 401 })
  }
  
  return NextResponse.next()
}

      3. Input Sanitization

      import DOMPurify from 'isomorphic-dompurify'

const clean = DOMPurify.sanitize(userInput)

      Developer Experience

      1. ESLint Configuration

      {
  "extends": "next/core-web-vitals",
  "rules": {
    "no-console": "warn",
    "@typescript-eslint/no-unused-vars": "error"
  }
}

      2. Prettier Configuration

      {
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

      3. Git Hooks

      npm install -D husky lint-staged

# package.json
{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"]
  }
}

      Testing

      1. Unit Tests

      import { render, screen } from '@testing-library/react'
import Component from './Component'

test('renders component', () => {
  render(<Component />)
  expect(screen.getByText('Hello')).toBeInTheDocument()
})

      2. E2E Tests

      import { test, expect } from '@playwright/test'

test('home page', async ({ page }) => {
  await page.goto('/')
  await expect(page.getByRole('heading')).toBeVisible()
})

      Congratulations! You have completed the Next.js tutorial. Keep practicing and build amazing applications!

      Previous Chapter: Next.js Configuration