Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Next.js 13: Client side navigation does not update head #42414

Closed
1 task done
shadcn opened this issue Nov 3, 2022 · 7 comments
Closed
1 task done

Next.js 13: Client side navigation does not update head #42414

shadcn opened this issue Nov 3, 2022 · 7 comments
Labels
bug Issue was opened via the bug report template.

Comments

@shadcn
Copy link
Contributor

shadcn commented Nov 3, 2022

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
	Platform: darwin
	Arch: x64
	Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:17:10 PDT 2022; root:xnu-8020.140.49~2/RELEASE_X86_64
Binaries:
	Node: 16.18.0
	npm: 8.19.2
	Yarn: 1.22.19
	pnpm: 7.13.5
Relevant packages:
	next: 13.0.2-canary.2
	eslint-config-next: 13.0.0
	react: 18.2.0
	react-dom: 18.2.0

What browser are you using? (if relevant)

Bug present in all browsers

How are you deploying your application? (if relevant)

Local and Vercel

Describe the Bug

On client side navigation, head.tsx is not updating the DOM. Works fine when you force a refresh.

Using the current file structure:

├── posts
│   └── [id]
│       ├── head.tsx
│       └── page.tsx
├── head.tsx
├── layout.tsx
└── page.tsx

See repo at: https://github.com/shadcn/next-debug-head

Expected Behavior

Expected the <title /> tag to be updated on client side navigation.

Link to reproduction

https://next-debug-head.vercel.app

To Reproduce

  1. Click on Post one. Check the title.
  2. Refresh the page. Check the title again.
@shadcn shadcn added the bug Issue was opened via the bug report template. label Nov 3, 2022
@shadcn
Copy link
Contributor Author

shadcn commented Nov 3, 2022

OK looks like a known issue. I just found the following in the docs:

Warning: Currently, the Head export does not re-render on client-side transitions, only on > initial render. To work around this for <title>, you can use a client component with > useEffect that updates document.title. This will be fixed soon in a future release.

https://beta.nextjs.org/docs/api-reference/file-conventions/head

@Geczy
Copy link

Geczy commented Nov 4, 2022

can you impl the workaround?

@milovangudelj
Copy link
Contributor

So far this is what I've been using. Hope it helps.

// ./components/TitleUpdater.tsx

"use client";

import { useEffect } from "react";

const TitleUpdater = ({ title }: { title: string }) => {
   useEffect(() => {
      document.title = title;
   });

   return null;
};

export default TitleUpdater;

And you just place it on any of your pages passing in the title like so

// ./app/[userId]/page.tsx

import TitleUpdater from '../../components/TitleUpdater.tsx';

const getUser = async (userId: string) => {...}; // call to api to get user data

const UserPage = async ({ params }: UserPageProps) => {
   const { userId } = params;
   const { name }: UserType = await getUser(userId);

   const title = `${name} • Your website`;

   return (
      <>
         <TitleUpdater title={title} />
         <main>
            // your page content
         </main>
      </>
   );
}

export default UserPage;

You should still use the new head file if you want the title to be picked up on first render by the server since the update is triggered only on client side.

@st1ng7ay
Copy link

meta is also not update. is a way to update it ?

@st1ng7ay
Copy link

13.0.4 solve the problem

@shadcn
Copy link
Contributor Author

shadcn commented Nov 18, 2022

Confirmed. Fixed by #42904. Closing this. Thanks everyone.

@shadcn shadcn closed this as completed Nov 18, 2022
@github-actions
Copy link
Contributor

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Dec 18, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue was opened via the bug report template.
Projects
None yet
Development

No branches or pull requests

4 participants