继26天的内容写的实战企业博客系统（Next.js SSR + SSG）-前端-E先生的博客

好的！现在我们来把 第二十六天的 Next.js SSR/SSG 实战 细化成完整的开发过程，直接做一个企业级的博客系统核心功能，满足 SEO、首屏优化、数据渲染等需求。

🏗 实战项目：企业博客系统（Next.js SSR + SSG）

目标：

首页使用 SSG，提升首屏速度
文章详情页使用 ISR，提升 SEO 且自动增量更新
使用 Next.js API 直接访问外部 API 数据（模拟 CMS 后台）

1. 项目结构

arduino复制编辑/pages
  ├─ index.tsx              // 首页 SSG
  ├─ blog/
      ├─ [id].tsx           // 博客详情页 ISR/lib
  └─ api.ts                 // 请求 API 封装

2. /lib/api.ts - 数据请求封装

export async function fetchPosts() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  return res.json();
}

export async function fetchPost(id: string) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
  return res.json();
}

3. 首页（SSG）

/pages/index.tsx

import Link from 'next/link';
import { fetchPosts } from '../lib/api';

export async function getStaticProps() {
  const posts = await fetchPosts();
  return { props: { posts } };
}

export default function Home({ posts }) {
  return (
    <div>
      <h1>企业博客</h1>
      <ul>
        {posts.slice(0, 10).map(post => (
          <li key={post.id}>
            <Link href={`/blog/${post.id}`}>
              {post.title}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

SSG：页面在构建时生成 HTML
SEO 友好：搜索引擎直接看到完整的博客列表 HTML

4. 博客详情页（ISR）

/pages/blog/[id].tsx

import { fetchPost } from '../../lib/api';

export async function getStaticPaths() {
  const posts = await fetchPost(''); // 这里只是为了模拟接口，你可传空或做简化
  const paths = Array.from({ length: 10 }).map((_, idx) => ({
    params: { id: (idx + 1).toString() }
  }));

  return { paths, fallback: 'blocking' };
}

export async function getStaticProps({ params }) {
  const post = await fetchPost(params.id);
  return {
    props: { post },
    revalidate: 10, // 10秒后增量更新
  };
}

export default function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

ISR：首次访问会生成静态页面，之后每隔 10 秒自动更新一次
fallback: 'blocking'：首次访问新路径时，阻塞请求直到生成 HTML