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

[johnrackles]

Verify canary release

• 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 <title> like it is described here https://beta.nextjs.org/docs/routing/pages-and-layouts#modifying-head when there is already one defined in a layout.tsx file.

Expected Behavior

I'd assume that a <title> tag in a head.tsx file would overwrite the layout <title>

Link to reproduction

https://github.com/johnrackles/next13-title-tag

To Reproduce

Remove line 5 in layout.tsx and the title change happens from within head.tsx

[alcidesbsilvaneto]

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

<title>{titleVariable}</title>

Mixing variables and text inside <title> was my problem.

[johnrackles]

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

<title>{titleVariable}</title>

Mixing variables and text inside <title> 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.

[chukwumaokere]

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.

[iammartincollins]

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.

[nunoplima]

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

[jaapaurelio]

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.

[pixelpax]

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 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

[karlhorky]

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

• [Feedback] App Directory Beta #41745 (reply in thread)

[huozhi]

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

[github-actions]

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.