Next.js：能否在模态框中加载带动态路由的静态生成页面？

针对Next.js 12（Pages Router） #

方案1：首页预加载所有文章静态数据 #

直接在首页的getStaticProps中获取所有文章的完整数据，传递给首页组件，点击链接时直接从本地数据中提取对应文章内容渲染到模态框，无需额外请求。

步骤：

1. 在首页的getStaticProps中获取所有文章的slug和完整内容：

// pages/index.js
export async function getStaticProps() {
  // 替换成你获取所有文章数据的逻辑（比如从数据库/文件系统读取）
  const allPosts = await getAllPosts();
  return {
    props: { allPosts },
    revalidate: 86400 // 可选，按需设置增量静态再生
  };
}

2. 首页组件中维护模态框状态，点击链接时匹配对应文章：

// pages/index.js
import { useState } from 'react';
import PostModal from '../components/PostModal';

export default function Home({ allPosts }) {
  const [selectedPost, setSelectedPost] = useState(null);

  const handlePostClick = (slug) => {
    const post = allPosts.find(p => p.slug === slug);
    setSelectedPost(post);
  };

  return (
    <div>
      <h1>文章列表</h1>
      <div className="post-links">
        {allPosts.map(post => (
          <button
            key={post.slug}
            onClick={() => handlePostClick(post.slug)}
            // 保留href用于SEO和右键新标签页打开
            href={`/posts/${post.slug}`}
            as={`/posts/${post.slug}`}
          >
            {post.title}
          </button>
        ))}
      </div>
      
      {selectedPost && (
        <PostModal
          post={selectedPost}
          onClose={() => setSelectedPost(null)}
        />
      )}
    </div>
  );
}

3. 模态框组件直接渲染传入的文章数据：

// components/PostModal.js
export default function PostModal({ post, onClose }) {
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={e => e.stopPropagation()}>
        <button onClick={onClose}>关闭</button>
        <h2>{post.title}</h2>
        <div dangerouslySetInnerHTML={{ __html: post.content }} />
      </div>
    </div>
  );
}

方案2：按需加载静态生成的JSON文件（适合文章数量多的场景） #

如果首页预加载所有数据体积过大，可以在点击时直接读取Next.js静态生成的文章JSON文件（构建产物中每个静态页面会生成对应的.json文件）。

步骤：

1. 点击链接时，根据slug请求对应静态JSON：

// pages/index.js
import { useState } from 'react';
import PostModal from '../components/PostModal';

export default function Home({ allPostsSlugs }) {
  const [selectedPost, setSelectedPost] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  const handlePostClick = async (slug) => {
    setIsLoading(true);
    // 请求静态生成的文章数据，路径对应你的文章路由
    const res = await fetch(`/posts/${slug}.json`);
    const postData = await res.json();
    setSelectedPost(postData.props.post);
    setIsLoading(false);
  };

  return (
    <div>
      <h1>文章列表</h1>
      <div className="post-links">
        {allPostsSlugs.map(({ slug }) => (
          <button
            key={slug}
            onClick={() => handlePostClick(slug)}
            href={`/posts/${slug}`}
            as={`/posts/${slug}`}
          >
            {slug}
          </button>
        ))}
      </div>
      
      {isLoading && <div>加载中...</div>}
      {selectedPost && (
        <PostModal
          post={selectedPost}
          onClose={() => setSelectedPost(null)}
        />
      )}
    </div>
  );
}

export async function getStaticProps() {
  // 只获取所有文章的slug，减少首页数据体积
  const allPostsSlugs = await getAllPostsSlugs();
  return {
    props: { allPostsSlugs },
  };
}

针对Next.js 13（App Router） #

方案1：Server Component预取数据，客户端组件渲染模态框 #

利用App Router的Server Component特性，在首页预取所有文章数据，传递给客户端组件处理交互和模态框渲染。

1. 首页page.tsx（Server Component）：

// app/page.tsx
import PostList from './PostList';

async function getAllPosts() {
  // 替换成你的文章数据获取逻辑
  const res = await fetch('your-data-source', { cache: 'force-cache' });
  return res.json();
}

export default async function Home() {
  const allPosts = await getAllPosts();
  return (
    <main>
      <h1>文章列表</h1>
      <PostList allPosts={allPosts} />
    </main>
  );
}

2. 客户端组件PostList.tsx：

// app/PostList.tsx
'use client';
import { useState } from 'react';
import PostModal from './PostModal';

export default function PostList({ allPosts }) {
  const [selectedPost, setSelectedPost] = useState(null);

  return (
    <>
      <div className="post-links">
        {allPosts.map(post => (
          <button
            key={post.slug}
            onClick={() => setSelectedPost(post)}
            // 保留链接用于SEO和右键新标签页
            href={`/posts/${post.slug}`}
          >
            {post.title}
          </button>
        ))}
      </div>

      {selectedPost && (
        <PostModal
          post={selectedPost}
          onClose={() => setSelectedPost(null)}
        />
      )}
    </>
  );
}

3. 模态框组件PostModal.tsx（客户端组件）：

// app/PostModal.tsx
'use client';

export default function PostModal({ post, onClose }) {
  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center" onClick={onClose}>
      <div className="bg-white p-6 rounded-lg max-w-2xl w-full" onClick={e => e.stopPropagation()}>
        <button onClick={onClose} className="mb-4">关闭</button>
        <h2 className="text-2xl mb-2">{post.title}</h2>
        <div className="prose">
          {post.content}
        </div>
      </div>
    </div>
  );
}

方案2：按需读取静态生成的页面数据 #

如果文章数量多，不想预加载所有数据，可以在点击时请求对应静态页面的page.json文件（App Router静态生成的页面会在app/posts/[slug]/下生成page.json）：

修改PostList.tsx的点击逻辑：

'use client';
import { useState } from 'react';
import PostModal from './PostModal';

export default function PostList({ allPostsSlugs }) {
  const [selectedPost, setSelectedPost] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  const handlePostClick = async (slug) => {
    setIsLoading(true);
    const res = await fetch(`/posts/${slug}/page.json`);
    const data = await res.json();
    // 取出页面props中的文章数据
    setSelectedPost(data.props.post);
    setIsLoading(false);
  };

  return (
    <>
      <div className="post-links">
        {allPostsSlugs.map(({ slug, title }) => (
          <button
            key={slug}
            onClick={() => handlePostClick(slug)}
            href={`/posts/${slug}`}
          >
            {title}
          </button>
        ))}
      </div>

      {isLoading && <div>加载中...</div>}
      {selectedPost && (
        <PostModal
          post={selectedPost}
          onClose={() => setSelectedPost(null)}
        />
      )}
    </>
  );
}

注意事项 #

• 如果文章数量极大，预加载所有数据会导致首页体积过大，优先选择按需加载静态JSON文件的方案。
• 保留链接的href属性可以保证SEO友好，用户右键点击也能在新标签页打开文章页面。
• 静态生成的JSON文件路径需要和你的路由结构对应，构建后可以在.next/static目录下确认文件位置。

内容的提问来源于stack exchange，提问作者user12457151