Next.js 系列教程（四）：Next.js 16 新特性详解

1. Next.js 16 简介

Next.js 16 是 React 全栈框架的最新主要版本，带来了许多令人兴奋的新特性和改进。这个版本专注于提升开发体验、性能优化和更灵活的架构选择。

主要更新亮点：

React Server Components: 原生支持 React Server Components
Partial Prerendering: 革命性的部分预渲染技术
内置 MDX 支持: 直接在项目中使用 MDX
改进的缓存控制: 更精细的缓存策略控制
新的图像优化: 增强的图像处理能力
中间件增强: 更强大的中间件功能

2. React Server Components

React Server Components (RSC) 是 Next.js 16 中最重要的新特性之一，它允许在服务器上渲染组件，减少客户端 JavaScript 包的大小。

基本用法

// src/app/dashboard/page.tsx
import { getUser } from '@/lib/user-service';
import UserDashboard from './user-dashboard';

// 这是一个 Server Component（默认）
export default async function DashboardPage() {
  // 在服务器上获取数据
  const user = await getUser();
  
  return (
    <div>
      <h1>欢迎, {user.name}!</h1>
      {/* UserDashboard 也是一个 Server Component */}
      <UserDashboard userId={user.id} />
    </div>
  );
}

Client Components 的使用

// src/components/interactive-button.tsx
'use client'; // 明确标记为 Client Component

import { useState } from 'react';

export default function InteractiveButton() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      点击次数: {count}
    </button>
  );
}

Server 和 Client Components 混合使用

// src/app/page.tsx
import ServerComponent from '@/components/server-component';
import ClientComponent from '@/components/client-component';

export default function HomePage() {
  return (
    <div>
      {/* Server Component */}
      <ServerComponent>
        {/* 通过 props 传递数据给 Client Component */}
        <ClientComponent initialData={{ message: 'Hello from server' }} />
      </ServerComponent>
    </div>
  );
}

3. Partial Prerendering

Partial Prerendering 是 Next.js 16 引入的一项革命性技术，它结合了静态生成和服务器端渲染的优势。

工作原理

Partial Prerendering 将页面分为两部分：

静态外壳: 静态生成的部分，快速显示
动态内容: 在服务器上渲染的部分，稍后加载

配置 Partial Prerendering

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    partialPrerendering: true,
  },
};

module.exports = nextConfig;

使用示例

// src/app/news/page.tsx
import { getLatestNews } from '@/lib/news-service';
import NewsList from '@/components/news-list';

export default async function NewsPage() {
  // 静态生成的部分
  const staticNews = await getLatestNews({ limit: 5 });
  
  return (
    <div>
      <h1>最新新闻</h1>
      {/* 静态内容立即显示 */}
      <NewsList news={staticNews} />
      
      {/* 动态内容稍后加载 */}
      <Suspense fallback={<div>加载更多新闻...</div>}>
        <DynamicNewsContent />
      </Suspense>
    </div>
  );
}

// 动态内容组件
async function DynamicNewsContent() {
  // 这部分会在服务器上渲染
  const moreNews = await getLatestNews({ limit: 20 });
  
  return <NewsList news={moreNews.slice(5)} />;
}

4. 内置 MDX 支持

Next.js 16 现在原生支持 MDX，允许在 Markdown 中直接使用 React 组件。

安装依赖

1	npm install @next/mdx @mdx-js/react

配置 MDX

// next.config.js
const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [],
    rehypePlugins: [],
  },
});

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
};

module.exports = withMDX(nextConfig);

创建 MDX 页面

// src/app/blog/introduction.mdx
import { Callout } from '@/components/callout';

# 欢迎使用 Next.js 16

Next.js 16 带来了许多令人兴奋的新特性。

<Callout type="info">
  这是一个信息提示框组件
</Callout>

## 新特性

- React Server Components
- Partial Prerendering
- 内置 MDX 支持

使用自定义组件

// src/components/callout.tsx
'use client';

import { cn } from '@/lib/utils';

interface CalloutProps {
  children: React.ReactNode;
  type?: 'info' | 'warning' | 'error';
}

export function Callout({ 
  children, 
  type = 'info' 
}: CalloutProps) {
  return (
    <div className={cn(
      'my-6 rounded-lg border p-4',
      type === 'info' && 'border-blue-200 bg-blue-50',
      type === 'warning' && 'border-yellow-200 bg-yellow-50',
      type === 'error' && 'border-red-200 bg-red-50'
    )}>
      {children}
    </div>
  );
}

5. 改进的缓存控制

Next.js 16 提供了更精细的缓存控制机制，让开发者能够更好地管理数据缓存。

请求级缓存控制

// src/lib/data-service.ts
export async function getCachedData() {
  const res = await fetch('https://api.example.com/data', {
    // 缓存 1 小时
    next: { revalidate: 3600 }
  });
  
  return res.json();
}

export async function getNoCacheData() {
  const res = await fetch('https://api.example.com/data', {
    // 不缓存
    cache: 'no-store'
  });
  
  return res.json();
}

路由级缓存控制

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

export async function GET() {
  const data = await fetchData();
  
  return NextResponse.json(data, {
    headers: {
      'Cache-Control': 'public, s-maxage=3600, stale-while-revalidate=59'
    }
  });
}

动态路由缓存

// src/app/products/[id]/page.tsx
export const dynamic = 'force-dynamic'; // 强制动态渲染
// 或者
export const revalidate = 3600; // 每小时重新验证

export default async function ProductPage({ params }: { params: { id: string } }) {
  const product = await getProduct(params.id);
  
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  );
}

6. 新的图像优化功能

Next.js 16 在图像优化方面进行了重大改进。

响应式图像增强

// src/components/responsive-image.tsx
'use client';

import Image from 'next/image';

export default function ResponsiveImage() {
  return (
    <Image
      src="/images/hero.jpg"
      alt="Hero image"
      fill
      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
      style={{
        objectFit: 'cover',
        objectPosition: 'center',
      }}
      quality={85}
      priority
    />
  );
}

图像加载优化

// src/components/image-with-placeholder.tsx
'use client';

import Image from 'next/image';
import { useState } from 'react';

export default function ImageWithPlaceholder() {
  const [isLoaded, setIsLoaded] = useState(false);
  
  return (
    <div className="relative">
      {/* 低质量图片占位符 */}
      <Image
        src="/images/photo.jpg"
        alt="Photo"
        width={800}
        height={600}
        quality={20}
        className={`blur-sm ${isLoaded ? 'hidden' : 'block'}`}
      />
      
      {/* 高质量图片 */}
      <Image
        src="/images/photo.jpg"
        alt="Photo"
        width={800}
        height={600}
        quality={85}
        className={isLoaded ? 'block' : 'hidden'}
        onLoad={() => setIsLoaded(true)}
      />
    </div>
  );
}

7. 中间件增强

Next.js 16 对中间件进行了增强，提供了更强大的功能。

基本中间件

// src/middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // 检查用户是否已认证
  const isAuthenticated = checkAuth(request);
  
  if (!isAuthenticated && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  
  return NextResponse.next();
}

export const config = {
  matcher: ['/dashboard/:path*', '/admin/:path*'],
};

高级中间件功能

// src/middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const response = NextResponse.next();
  
  // 添加安全头部
  response.headers.set('X-Content-Type-Options', 'nosniff');
  response.headers.set('X-Frame-Options', 'DENY');
  response.headers.set('X-XSS-Protection', '1; mode=block');
  
  // A/B 测试
  const abTestGroup = Math.random() > 0.5 ? 'A' : 'B';
  response.cookies.set('ab-test', abTestGroup, {
    maxAge: 60 * 60 * 24 * 7, // 1 周
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
  });
  
  return response;
}

8. 部署和监控

Next.js 16 提供了更好的部署和监控工具。

性能监控

// src/app/layout.tsx
import { Analytics } from '@vercel/analytics/react';
import { SpeedInsights } from '@vercel/speed-insights/next';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>
        {children}
        <Analytics />
        <SpeedInsights />
      </body>
    </html>
  );
}

错误监控

// src/app/error.tsx
'use client';

import { useEffect } from 'react';

export default function Error({
  error,
  reset,
}: {
  error: Error;
  reset: () => void;
}) {
  useEffect(() => {
    // 上报错误到监控服务
    console.error(error);
  }, [error]);

  return (
    <div>
      <h2>出错了!</h2>
      <p>{error.message}</p>
      <button onClick={() => reset()}>重试</button>
    </div>
  );
}

构建优化

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  // 启用压缩
  compress: true,
  
  // 优化图片
  images: {
    formats: ['image/avif', 'image/webp'],
  },
  
  // 启用 Webpack 5
  webpack: (config) => {
    // 自定义 Webpack 配置
    return config;
  },
};

module.exports = nextConfig;

总结

Next.js 16 带来了许多强大的新特性和改进，包括：

React Server Components: 提升性能，减少客户端包大小
Partial Prerendering: 结合静态生成和服务器渲染的优势
内置 MDX 支持: 直接在项目中使用 MDX
改进的缓存控制: 更精细的缓存策略
新的图像优化: 增强的图像处理能力
中间件增强: 更强大的中间件功能

这些新特性使 Next.js 16 成为构建现代 Web 应用的强大工具。在接下来的教程中，我们将深入探讨如何在实际项目中应用这些新特性。