Next.js：如何在文章页面向全局导航栏注入组件？

不用直接操作DOM（包括useRef），React是数据驱动框架，通过Context状态共享是更合理的方案，具体步骤如下：

1. 创建导航内容共享Context #

新建一个Context文件，用来存放导航栏的额外内容状态和更新方法：

// contexts/NavigationContext.js
import { createContext, useContext, useState } from 'react';

const NavigationContext = createContext({
  extraContent: null,
  setExtraContent: () => {},
});

export function NavigationProvider({ children }) {
  const [extraContent, setExtraContent] = useState(null);
  return (
    <NavigationContext.Provider value={{ extraContent, setExtraContent }}>
      {children}
    </NavigationContext.Provider>
  );
}

export function useNavigation() {
  return useContext(NavigationContext);
}

2. 在全局_app.js中注入Provider #

把NavigationProvider包裹在Layout外层，让所有页面和组件都能访问Context：

// pages/_app.js
import { NavigationProvider } from '../contexts/NavigationContext';
import LayoutWrapper from '../components/LayoutWrapper';

function MyApp({ Component, pageProps }) {
  return (
    <NavigationProvider>
      <LayoutWrapper>
        <Component {...pageProps} />
      </LayoutWrapper>
    </NavigationProvider>
  );
}

export default MyApp;

3. 修改LayoutWrapper渲染动态内容 #

在垂直导航栏中，根据Context的extraContent状态渲染文章元数据：

// components/LayoutWrapper.js
import { useNavigation } from '../contexts/NavigationContext';

export default function LayoutWrapper({ children }) {
  const { extraContent } = useNavigation();
  return (
    <div className="layout-container">
      <aside className="vertical-nav">
        {/* 原有固定导航内容 */}
        <div className="nav-links">
          <a href="/">首页</a>
          <a href="/blog">博客列表</a>
        </div>
        {/* 动态渲染的文章元数据 */}
        {extraContent && <div className="post-meta">{extraContent}</div>}
      </aside>
      <main>{children}</main>
    </div>
  );
}

4. 在文章页面设置元数据 #

在[...slug].js中获取文章数据，通过Context的更新方法把元数据传递给导航栏，同时在页面卸载时清空状态：

// pages/blog/page/[...slug].js
import { useEffect } from 'react';
import { useNavigation } from '../../../contexts/NavigationContext';

export default function PostPage({ post }) {
  const { setExtraContent } = useNavigation();

  useEffect(() => {
    // 组装文章元数据的JSX结构
    const metaContent = (
      <div className="post-meta-details">
        <h3>文章信息</h3>
        <p><strong>发布日期:</strong> {post.date}</p>
        <p><strong>作者:</strong> {post.author}</p>
        <p><strong>分类:</strong> {post.category}</p>
      </div>
    );
    setExtraContent(metaContent);

    // 页面切换时清空，避免残留数据到其他页面
    return () => setExtraContent(null);
  }, [post, setExtraContent]);

  return (
    <div className="post-content">
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </div>
  );
}

// 示例：获取文章数据的静态生成逻辑
export async function getStaticProps({ params }) {
  // 实际项目中替换为从数据库/文件读取真实数据
  const post = {
    title: 'Next.js博客搭建实战',
    date: '2024-05-20',
    author: 'John',
    category: '前端框架',
    content: '<p>这是文章的正文内容...</p>'
  };
  return { props: { post } };
}

export async function getStaticPaths() {
  return {
    paths: [{ params: { slug: ['nextjs-blog-guide'] } }],
    fallback: 'blocking'
  };
}

为什么不用useRef？ #

直接通过useRef操作DOM违背React数据驱动的设计理念，容易出现状态与DOM不一致的问题；而且Next.js存在服务端渲染场景，服务端没有DOM节点，直接操作会引发错误。

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