Next.js中如何使用Hooks实现服务端渲染并生成静态页面

云上老周

2026-4-13

嘿，我完全懂你刚从React转Next.js时，想搞懂静态页面生成的困惑——毕竟Next.js的渲染模式和纯React确实不太一样，而且SEO优化的核心就是静态页面的生成嘛！结合你的情况，我分两种常用的路由模式给你讲清楚怎么弄：

一、先看你用的App Router（Next.js 13+）

从你贴的layout.tsx来看，你用的是Next.js 13之后的App Router，这种模式下默认就是静态渲染，只要你没用到动态数据或特定的客户端API。具体操作如下：

默认静态页面生成
只要你的页面组件（包括Layout）里没有依赖只能在客户端获取的数据（比如localStorage、window对象），也没使用useServer或者dynamic()这类触发动态渲染的API，Next.js会在构建时自动把页面生成静态HTML、CSS和JS文件，直接部署就能被搜索引擎爬取。

带数据的静态页面（静态数据获取）
如果你的页面需要获取数据来生成内容（比如列表页），直接在组件里用async/await结合fetch就行——Next.js会在构建时执行这个数据获取逻辑，把数据注入到页面里生成静态内容：

// app/posts/page.tsx
async function fetchPosts() {
  // 默认cache: 'force-cache'，构建时缓存数据
  const res = await fetch('https://api.example.com/posts');
  if (!res.ok) throw new Error('获取文章失败');
  return res.json();
}

export default async function PostsPage() {
  const posts = await fetchPosts();
  return (
    <div>
      {posts.map(post => <h3 key={post.id}>{post.title}</h3>)}
    </div>
  );
}

如果需要定期更新静态内容（增量静态再生，ISR），给fetch加个revalidate参数就行，比如每60秒重新生成一次页面：

const res = await fetch('https://api.example.com/posts', { next: { revalidate: 60 } });

处理客户端交互组件
你的UserProvider、Navbar这类可能涉及用户状态的组件，属于客户端交互部分，可以给它们加上'use client'指令标记为客户端组件——这样这些组件会在客户端渲染，但页面的静态内容依然会在构建时生成，完全不影响SEO：
```
// app/components/Navbar.tsx
'use client';

import { useUser } from '../context/UserContext';

export default function Navbar() {
  const user = useUser();
  return (
    <nav>
      {user ? <span>欢迎回来，{user.name}</span> : <button>登录</button>}
    </nav>
  );
}
```
导出纯静态文件
如果想生成完全静态的文件（不依赖Next.js服务器），可以在next.config.js里配置output: 'export'，然后运行npm run build，会在out目录生成纯静态资源，直接部署到静态托管服务（比如Netlify、Vercel静态托管）就行：
```
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
};

module.exports = nextConfig;
```

二、如果是旧版Pages Router

要是你之前接触的是Pages Router（pages/目录下的页面），那用getStaticProps函数来实现静态生成，这是旧版的核心方式：

// pages/posts.tsx
// 构建时执行这个函数，获取数据传递给页面组件
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
  // revalidate开启ISR，每60秒更新一次
  return { props: { posts }, revalidate: 60 };
}

export default function PostsPage({ posts }) {
  return (
    <div>
      {posts.map(post => <h3 key={post.id}>{post.title}</h3>)}
    </div>
  );
}

最后提醒下：你可以运行npm run build之后，看看.next/static目录的内容，或者直接打开out目录（配置了output: 'export'的话）里的HTML文件，确认静态内容是否已经生成。如果还有特定组件导致无法静态生成的问题，把具体代码贴出来就能更精准地帮你排查啦！

备注：内容来源于stack exchange，提问作者jonas balsys

Next.js中如何使用Hooks实现服务端渲染并生成静态页面

一、先看你用的App Router（Next.js 13+） #

二、如果是旧版Pages Router #

一、先看你用的App Router（Next.js 13+）

二、如果是旧版Pages Router