next.js icon indicating copy to clipboard operation
next.js copied to clipboard

Published 20 hours ago • verified publisher icon vercel

Next 13: unable to change <title> with head.tsx when one is specified in layout.tsx

Open johnrackles opened this issue 2 years ago • 3 comments

Verify canary release

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

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.6.0: Thu Sep 29 20:13:56 PDT 2022; root:xnu-8020.240.7~1/RELEASE_ARM64_T6000
Binaries:
  Node: 18.12.0
  npm: 8.19.2
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 13.0.1-canary.2
  eslint-config-next: 13.0.0
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Firefox 107.0b7

How are you deploying your application? (if relevant)

No response

Describe the Bug

When using the new app directory, I'm unable to set a

like it is described here <a href="https://beta.nextjs.org/docs/routing/pages-and-layouts#modifying-head" rel="nofollow" target="_blank" >https://beta.nextjs.org/docs/routing/pages-and-layouts#modifying-head</a> when there is already one defined in a layout.tsx file. <h3>Expected Behavior</h3> <p>I'd assume that a </p><title> tag in a head.tsx file would overwrite the layout <title> <h3>Link to reproduction</h3> <p>https://github.com/johnrackles/next13-title-tag</p> <h3>To Reproduce</h3> <p>Remove line 5 in layout.tsx and the title change happens from within head.tsx</p>

johnrackles avatar Oct 31 '22 14:10 johnrackles

Try to define your title on a variable and then use:

<title>{titleVariable}</title>

Mixing variables and text inside

was my problem.

alcidesbsilvaneto avatar Nov 01 '22 01:11 alcidesbsilvaneto

Try to define your title on a variable and then use:

<title>{titleVariable}</title>

Mixing variables and text inside

was my problem.

That is a different bug I think, even when I only use a variable, it doesn't overwrite the title specified in the layout.

johnrackles avatar Nov 01 '22 09:11 johnrackles

I'm having this problem too. I have a RootLayout with some meta tags, no title specified there Instead I have an app/head.tsx with

export default function Head () {
    return (
        <>
            <title>Art Site</title>
        </>
    );
}

and app/shop/head.tsx

export default function Head () {
    return (
        <>
            <title>Art Store</title>
        </>
    );
}

And the title never changes unless i type into the url /shop and hit enter. or unless i refresh the page. In those 2 instances it loads with the right title then, but not on navigation.

chukwumaokere avatar Nov 07 '22 07:11 chukwumaokere

I'm having the same/a similar issue. Each of my page.tsx files has an accompanying head.tsx file. Refresh sets the header correctly but navigating doesn't change it from the original title.

Note I'm using "use client" in my pages as I don't care about SSR for them.

iammartincollins avatar Nov 24 '22 17:11 iammartincollins

Updating to the atm latest next version (13.0.6) solved the issue for me.

nunoplima avatar Dec 07 '22 18:12 nunoplima

This is still happening to me on next 13.1.1. Tried with both approaches, <title> inside layout.tsx and head.tsx, and both have issues. Sometimes it's shows and sometimes not.

jaapaurelio avatar Jan 03 '23 14:01 jaapaurelio

Hey y'all, if you're using next 13 with app directory, it works differently now and uses a 'special files' approach. If you found this thread, you may be trying to use the old way.

Instead of providing a <Head> tag in your page JSX, you create a separate file head.jsx which will automatically be injected as

for the colocated page.tsx and those in any sub directories.

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

pixelpax avatar Feb 07 '23 03:02 pixelpax

Looks like head.js / head.tsx is going away, in favor of new exports called metadata / generateMetadata():

  • https://github.com/vercel/next.js/discussions/41745#discussioncomment-4818481

karlhorky avatar Feb 07 '23 16:02 karlhorky

Close per above replies for moving to metadata API as the replacement of head.js

huozhi avatar May 03 '23 14:05 huozhi

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[bot] avatar Jun 03 '23 00:06 github-actions[bot]