Next.js中导航链接的服务端渲染实现咨询

针对你需要实现导航链接预渲染、且数据必须在页面组件中获取的需求，推荐通过页面getStaticProps获取导航数据 + _app.js传递给Layout的方式实现，完全避免客户端渲染的问题，具体步骤如下：

1. 抽离导航数据获取逻辑 #

先把获取导航链接的逻辑封装成公共函数，方便所有页面复用：

// lib/nav.js
export async function getNavLinks() {
  // 替换为你的实际数据源：本地JSON文件、CMS API等
  // 示例1：读取本地JSON文件
  // const fs = require('fs');
  // const path = require('path');
  // return JSON.parse(fs.readFileSync(path.join(process.cwd(), 'data/nav.json'), 'utf8'));

  // 示例2：从API获取
  const res = await fetch('https://your-api-domain/nav-links');
  return res.json();
}

2. 在页面组件中获取导航数据 #

每个页面（包括动态路由页面）都通过getStaticProps调用上述函数，将导航数据注入到pageProps中：

// pages/index.js
import { getNavLinks } from '../lib/nav';

export default function Home({ navLinks, pageData }) {
  return <div>首页内容</div>;
}

export async function getStaticProps() {
  // 获取导航数据
  const navLinks = await getNavLinks();
  // 获取当前页面自身的数据
  const pageData = await fetchHomePageData();
  
  return {
    props: {
      navLinks,
      pageData
    },
    // 可选：开启增量静态再生，数据更新时自动重新生成页面
    revalidate: 60
  };
}

3. 修改_app.js传递导航数据给Layout #

在全局_app.js中，将pageProps里的导航数据传递给Layout组件：

import '../styles/globals.scss';
import { Layout } from '../components';

function MyApp({ Component, pageProps }) {
  return (
    <Layout navLinks={pageProps.navLinks}>
      <Component {...pageProps} />
    </Layout>
  );
}

export default MyApp;

4. Layout组件渲染导航链接 #

在Layout组件中直接使用传入的navLinks渲染导航，此时导航会在构建阶段就被预渲染成静态HTML：

// components/Layout.js
export function Layout({ navLinks, children }) {
  return (
    <div className="layout">
      <nav className="nav-bar">
        {navLinks.map(link => (
          <a 
            key={link.id} 
            href={link.href} 
            className={link.isActive ? 'active' : ''}
          >
            {link.label}
          </a>
        ))}
      </nav>
      <main>{children}</main>
    </div>
  );
}

核心原理说明 #

• getStaticProps在构建阶段运行（静态站点模式下），获取的导航数据会直接注入到页面的静态HTML中，完全属于预渲染内容，不会触发客户端请求。
• 所有页面复用同一导航数据获取逻辑，保证数据一致性，同时Next.js构建时会自动缓存请求结果，不会重复调用数据源。

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