
When developing a web application with Next.js, managing page titles can become a bit of a hassle. As your project expands, you want a system in place that handles `<title>` titles smoothly and prevents those all-too-common mistakes, like a misspelled brand name.

I'm going to show you how to set up a Page component that's type-safe, ensuring your browser tab titles stay consistent and free from typos.

## Our Goals

- Set the `<title>` tag through a property in a React component in Next.js framework.
- Have the flexibility to set either just the brand name `Steady Cursor` for our homepage, avoiding the redundant `Home | Steady Cursor`.
- For regular pages like contacts or catalog, we want to include the page name followed by a divider and then the brand name (example: `Contact | Steady Cursor`).
- Ensure we never misspell the brand name or forget the divider.
- Create a universal solution by implementing it into a Page component, which will be reused on every page.

## Solution

We use TypeScript to make sure our titles are always right. This means we can have just `Steady Cursor` for our main page or `Something | Steady Cursor` for other pages. TypeScript will tell us if we forget the divider or make a spelling mistake in our brand name.

Here's a sample of the final code:

```typescript
import { ReactNode } from "react";
import Head from "next/head";

export type PageProps = {
	title: string | null;
	headTitle: `${string} | Steady Cursor` | "Steady Cursor";
	children: ReactNode;
};

export const Page = ({ title, headTitle, children }: PageProps) => {
	return (
		<div>
			<Head>
				<title>{headTitle}</title>
			</Head>
			{title && <h1>{title}</h1>}
			{children}
		</div>
	);
};
```

## Usage

We can use the component:
- `<Page title="Contact" headTitle="Contact us | Steady Cursor"></Page>` for sub-pages
- `<Page title={null} headTitle="Steady Cursor"></Page>` for homepage.

## Tests for headTitle property

Below are the values I tested with the Page component. It's evident that Typescript flags values not meeting our requirements as errors.

Tested values:

- ✅ `Steady Cursor`
- ✅ `Contact | Steady Cursor`
- ✅ `About us | Steady Cursor`
- 🚨 `Steady Crsor`
- 🚨 `About Us|Steady Cursor`
- 🚨 `Contact| Steady Cursor`
- 🚨 `Lear |Steady Cursor`
- 🚨 `Blog | Sady Cursor`

## Conclusion

Creating a type-safe Page component in Next.js not only makes managing page titles easier across your application but also keeps common mistakes at bay.

With TypeScript, you can present your brand consistently and professionally right in the browser tabs, which often create the first impression for your visitors.

This is one of the best uses of template string literals I've seen. It's not limited to this case alone, and it's an elegant solution that enhances the reliability of your application.

Say Goodbye to Typos: type-safe <title> in Next.js


In this article, we will explain how to add markdown to the Steady Cursor website. Initially, the vision was clear - the website would house articles serving as supporting material for YouTube episodes, catering to those who prefer reading over watching. To accomplish this, markdown was chosen for its simplicity and flexibility. The website was to be built on a TailwindCSS and Next.js template. During the process, I stumbled upon a method to [render markdown on Next.js](https://nextjs.org/learn-pages-router/basics/dynamic-routes/render-markdown), which was a good starting point but not ideal as the returned object type with Front Matter from the `remark()` method was `any`, lacking specificity.

Further research led to the discovery of [`zod-matter`](https://github.com/HiDeoo/zod-matter), a library that perfectly solved this issue by allowing both markdown parsing and schema typing through the combination of `matter` and `zod`.

## Implementation

To set up, you'll need to install both `zod` and `zod-matter`:

~~~
npm install zod zod-matter
~~~

Create the file `/src/utils/getPostsData.ts` with the following content:

~~~typescript
import fs from 'fs';
import path from 'path';
import { z } from 'zod';
import { parse } from 'zod-matter';

const postsDirectory = path.join(process.cwd(), 'src', 'posts');

export const getPostsData = () => {
    const fileNames = fs.readdirSync(postsDirectory);
    const allPostsData = fileNames.map((fileName) => getPostData(fileName));

    return allPostsData;
};

const getPostData = (fileName: string) => {
    const slug = fileName.replace(/\.md$/, '');

    const fullPath = path.join(postsDirectory, fileName);
    const fileContents = fs.readFileSync(fullPath, 'utf8');

    const { data, content } = parse(
        fileContents,
        z.object({
            title: z.string(),
            date: z.string().datetime(),
        })
    );

    return {
        ...data,
        content,
        slug,
    };
};

~~~

This script is the core magic we need. It consists of two methods: `getPostsData`, which retrieves all markdown files from a specified directory, and `getPostData`, which processes each file's content and metadata using `zod-matter` to ensure type safety.

## Usage

You can utilize this setup anywhere, like on the homepage, by fetching all posts in the `getStaticProps` method:

~~~typescript
import Link from 'next/link';
import { getPostsData } from '@/utils/getPostsData';
import type { InferGetStaticPropsType } from 'next';

export default function Home({ posts }: InferGetStaticPropsType<typeof getStaticProps>) {
    return (
        <div>
            <h1>Blog posts</h1>

            <ul>
                {posts.map((post) => (
                    <li key={post.slug}>
                        <Link href={`/blog/${post.slug}`}>
                            {post.title} ({post.date})
                        </Link>
                    </li>
                ))}
            </ul>
        </div>
    );
}

export const getStaticProps = async () => {
    const posts = getPostsData();

    return {
        props: {
            posts,
        },
    };
};
~~~

Now, you have a typed array of posts at your disposal.

## Conclusion

The addition of `zod-matter` ensures that missing or incorrectly typed Front Matter data in a markdown file will throw an error, preventing faulty content from reaching production. This setup offers a streamlined, type-safe approach to managing content.

For a more detailed walkthrough, check out the accompanying YouTube video below.

Remember, this is just a high-level overview. For the full code snippets and a step-by-step guide, be sure to watch the detailed video tutorial. Source code can be found for this [episode on GitHub](https://github.com/steadycursor/episode-1-typesafe-markdown-files-with-nextjs-and-typescript).

Recent Episodes

Say Goodbye to Typos: type-safe <title> in Next.js

Typesafe Markdown files with Next.js and Typescript