The Be Sure Blog

Code Snippets | Problem Solving | Tips & Tricks

The Be Sure Blog banner

Next.js 13 - how to set dynamic HTML head titles

posted on 27.1.2023 by Below Surface in "Next.js"

In Next.js 13 with the new app directory routing activated, it's very simple to set a dynamic HTML title to each individual route.

Case 1: Make the URL of a blog post the HTML title value.

Folder hierarchy: ./app/post/[postUrl]/page.tsx

Just add another file, called "head.tsx" and add a React boiler plate like this (in VS Code, typing "rfce" + tab will create this for you):

import React from 'react'

function head() {   return (     <div>head</div>   ) }

export default head

Now, to destructure the parameters and make the TypeScript compiler happy at the same time, change the code to be:

import React from 'react'

function head({ params }: { params: { postUrl: string } }) {   return (     <>         <title>{params.postUrl}</title>     </>   ) }

export default head

The title will now be "next-js-13-how-to-set-dynamic-html-head-titles" in our case, which does not look good yet. It would be nicer to have each first letter in upper case and to remove the "-" characters:

import React from 'react'

function head({ params }: { params: { postUrl: string } }) {

    const array = params.postUrl.split("-");

    const upperCaseWords = => {         return ${word[0].toUpperCase()}${word.slice(1)}     });         const titleString = Be Sure Blog | ${upperCaseWords.join(" ")};

    return (         <>             <title>{titleString}</title>         </>     ) }

export default head

Done! The title is now "Be Sure Blog | Next Js 13 How To Set Dynamic Html Head Titles"




More posts of this category

Do a static export of a Next.js website

Doing a static export in Next.js is easy and working great on basic web hosting services


Change the port of a Next.js app

How to manually set the port from 3000 to any other number


Suppress Next.js img tag warnings

If you don't want to use their Image elements, this is how to disable the warnings


Add a robots.txt to your Next.js website

How to add your robots.txt file


Add Tailwind CSS to your Next.js app

A few commands and some possible error fixing and you are good to go!


Next.js 13 Tailwind CSS hot-reload issue fix

With the currently experimental app directory, hot-reload does not work properly


How to clear the cache of a Next.js application

How to create a fresh build without any cached data


How i finally fixed "sh: 1: next: not found"

My release pipeline failed constantly and it took me three hours to figure out the issue


How I fixed "Parsing error: DeprecationError"

'originalKeywordKind' has been deprecated since v5.0.0 (...)