NextJS如何判断当前URL是否为首页？路由报错求解决方案

客户端组件方案（需客户端交互时） #

如果你的组件需要在客户端处理交互，按以下步骤修改：

1. 在文件顶部添加"use client"指令
2. 导入usePathname替代useRouter（App Router 中useRouter不再提供pathname属性，usePathname是专门用于获取当前路径的 Hook）
3. 通过路径判断是否为首页：

"use client";
import { usePathname } from "next/navigation";

const isHome = usePathname() === "/";

服务端组件方案（推荐，无需客户端 hydration） #

如果你的组件是服务端组件（无需客户端交互），可以直接通过headers()获取请求URL，无需添加客户端指令：

import { headers } from "next/headers";

export default function YourComponent() {
  const headersList = headers();
  const url = new URL(headersList.get("referer") || headersList.get("host") || "");
  const isHome = url.pathname === "/";

  // 按场景设置元描述
  const metaDescription = isHome 
    ? "这里是首页的默认元描述" 
    : "这里是文章摘要作为元描述";

  return (
    <>
      <meta name="description" content={metaDescription} />
      {/* 其他组件内容 */}
    </>
  );
}

元描述统一设置优化 #

如果要在根布局app/layout.tsx中统一处理元描述，可以结合路由判断实现：

• 首页直接使用默认描述
• 非首页可从页面数据或props中获取文章摘要

示例代码：

import { headers } from "next/headers";

export default function RootLayout({ children }) {
  const headersList = headers();
  const url = new URL(headersList.get("referer") || headersList.get("host") || "");
  const isHome = url.pathname === "/";
  
  // 实际项目中可从页面props或数据接口获取文章摘要
  const articleExcerpt = "示例文章摘要内容";
  const metaDescription = isHome ? "首页默认描述文案" : articleExcerpt;

  return (
    <html lang="zh-CN">
      <head>
        <meta name="description" content={metaDescription} />
      </head>
      <body>{children}</body>
    </html>
  );
}

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