Nextjs13如何实现动态标题

pgccezyw 于 2023-11-18 发布在其他

关注(0)|答案(2)|浏览(227)

我在使用Next.js 13实现动态标题时遇到了问题。
文档说，（https：//beta.nextjs.org/docs/routing/pages-and-layouts#modifying-head）
警告：当前，导出不会使用next/link在客户端过渡中重新渲染，仅在初始渲染和重新加载时重新渲染。要解决此问题，您可以使用具有useEffect的客户端组件来更新document. title。我们计划在未来版本中修复此问题。
然后我尝试使用useEffect来实现动态标题，

'use client';

import { useEffect } from "react";;
import Head from 'next/head';
interface Props {
  params: {slug : string},
  searchParams: {id:string}
};

const getPost = async (id: string) => {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
  const posts = await res.json();

  return posts;
};

const Page = ({params, searchParams}: Props) => {
  useEffect(() => {
    const setDocumentTitle = async () => {
      const post = await getPost(params.slug);       
      document.title = post.title;
    }

    setDocumentTitle();
  }, [params.slug]);

  return (<>
      <Head>
        <title>Blog Post</title>
      </Head>
      <div>
        <h1>Blog Post</h1>
        <p>Slug: {params.slug}</p>
        <p>Id: {searchParams.id}</p>
      </div>
    </>);
};

export default Page;

字符串
但是它不起作用。标题仍然没有改变。有什么办法吗？
codesandbox前几次似乎运行良好，但如果您继续返回并单击Go to Post 1（next/link），文档标题不会更改。

next.js

来源：https://stackoverflow.com/questions/74401844/nextjs-13-how-to-implement-dynamic-title

2条答案

按热度按时间

3xiyfsfu1#

对不起，我迟到了，我希望你现在已经弄明白了，但如果有人发现它有用，请查看这个：https://nextjs-discord-common-questions.joulev.dev/how-to-set-metadata-to-page-tsx-rendered-as-client-components#how-do-i-set-dynamic-metadata-that-depends-on-client-side-states
我刚刚试过了，它工作得很好。

赞(0）回复(0）举报 2023-11-18

new9mtju2#

我没有看到这种模式的描述，所以这是有点简单和切线相关的其他答案，但我想我也会分享。
请注意，这将取决于您的应用程序结构，但我发现它直观的只是有一个专用的标题组件，可以坐在服务器组件的layout.tsx<head>，并有一个回退中列出的元数据，例如：

export const metadata: Metadata = {
  title: "The Default Title",
  description: 'Some interesting website description here'
};

export default function RootLayout({
  children
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang='en'>
      <head>
        <AppTitle />
      </head>
      <body className={inter.className}>{children}</body>
    </html>
  );
}

字符串
在这种情况下，<AppTitle>可以在外部客户端组件中使用use client定义，一旦页面在实现组件的逻辑中呈现，就可以自由引用window.location来查找路径名，如果要检查路由参数，则可以引用useParams。

'use client';

function useMyAppTitle() {
  switch(window.location.pathname) {
    //super arbitrary logic here. Not a good example but the gist of it
  }
  return result;
}

export default function AppTitle() {
  const appTitle = useMyAppTitle();

  return <title>{appTitle}</title>;
}

型
这并不完全理想，但在我看来，这比显式依赖useEffect要好，直到NextJS API有更好的替代方案，并且只是捕获客户端组件上的第一个可用渲染。

赞(0）回复(0）举报 2023-11-18

我来回答

Nextjs13如何实现动态标题

2条答案

相关问题

热门标签

最新问答