Next.js页面跨文件使用数组及SEO适配加载问题求解

1. 优先用静态生成（SEO最优） #

你的getStaticProps没生效大概率是因为动态路由页面未配置getStaticPaths——Next.js需要明确知道要预渲染哪些路径，才能正确传递props。

完整代码示例（假设页面为pages/articles/[id].js） #

import Head from 'next/head';
import { items } from "../../public/assets/ArticlesList.js";

// 生成所有需预渲染的路径
export async function getStaticPaths() {
  const paths = items.map((_, index) => ({
    params: { id: index.toString() } // 若id是数组索引，按实际情况调整
  }));

  return {
    paths,
    fallback: false // 设为true时，未预渲染的路径会在请求时动态生成，适合海量内容场景
  };
}

// 获取对应ID的文章数据，传递给组件
export async function getStaticProps({ params }) {
  const id = parseInt(params.id);
  const data = items[id];

  // 无对应数据时返回404
  if (!data) {
    return { notFound: true };
  }

  return { props: { data } };
}

const ArticlePage = ({ data }) => {
  // 此处data已预渲染完成，不会出现undefined
  return (
    <>
      <Head>
        <title>{data.title}</title>
        <meta name="description" content={data.description} /> {/* 补充SEO元标签 */}
      </Head>
      <div>
        {/* 页面内容 */}
      </div>
    </>
  );
};

export default ArticlePage;

为什么这是SEO最优方案？ #

• 页面在构建阶段就生成完整HTML，元标签直接写入HTML头部，搜索引擎爬虫无需执行JS即可读取。
• 无客户端加载延迟，用户打开页面就能看到完整标题与内容。

2. 动态数据场景用SWR配合客户端渲染 #

如果你的items数组会频繁更新，无法提前预渲染，可使用SWR，但需注意：现代搜索引擎虽能抓取JS渲染内容，但静态生成仍更稳妥。

代码示例 #

import Head from 'next/head';
import { useRouter } from 'next/router';
import useSWR from 'swr';

// 抽离数据获取逻辑，方便多页面复用
const fetchArticle = async (id) => {
  const { items } = await import("../../public/assets/ArticlesList.js");
  return items[id];
};

const ArticlePage = () => {
  const router = useRouter();
  const { id } = router.query;
  // SWR自动缓存数据，多页面复用同ID内容时无需重复请求
  const { data, error } = useSWR(id ? ['article', id] : null, ([_, id]) => fetchArticle(id));

  // 处理加载/错误状态
  if (error) return <div>加载失败</div>;
  if (!data && id) return <div>加载中...</div>;

  return (
    <>
      <Head>
        <title>{data?.title || '文章加载中'}</title>
        <meta name="description" content={data?.description || ''} />
      </Head>
      <div>
        {/* 页面内容 */}
      </div>
    </>
  );
};

export default ArticlePage;

3. 原代码临时修复（避免undefined报错） #

若暂时不想调整架构，可通过条件渲染解决初始undefined问题：

import Head from 'next/head';
import { useRouter } from 'next/router';
import { items } from "../../public/assets/ArticlesList.js";

const ArticlePage = () => {
  const router = useRouter();
  const { id } = router.query;
  const data = id ? items[id] : null;

  return (
    <>
      <Head>
        <title>{data?.title || '文章加载中'}</title>
      </Head>
      <div>
        {data ? (
          /* 页面内容 */
        ) : (
          <div>加载中...</div>
        )}
      </div>
    </>
  );
};

export default ArticlePage;

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