Skip to content

Instantly share code, notes, and snippets.

@MakStashkevich

MakStashkevich/__root_folder.md

Created January 3, 2023 10:39
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save MakStashkevich/23e8059f3b018a3c6e8e811b1a2d59b9 to your computer and use it in GitHub Desktop.
Save MakStashkevich/23e8059f3b018a3c6e8e811b1a2d59b9 to your computer and use it in GitHub Desktop.
Download ZIP
Dynamic header title & meta tags on NextJs 13
Raw
__root_folder.md 
app/
- head.tsx
- layout.tsx
- page.tsx
- blog/[slug]/page.tsx
Raw
app_head.tsx
import React from 'react';
export default function RootHead() {
return undefined; // Disable root head
}
Raw
app_layout.tsx
import React from "react";
import '../styles/globals.scss';
export default function RootLayout({children}: { children: React.ReactNode }) {
return (
<html>
<body>
{children}
</body>
</html>
)
}
Raw
app_page.tsx
import React from "react";
export default function RootPage() {
return (
<div>
// Set title & description without <Head/> components
<title>Home</title>
<meta name="description" content="My homepage"/>
// Set page code
<p>Other staff...</p>
</div>
)
}
Raw
blog_slug_page.tsx
import React from "react";
async function getBlogData() {
return {title: "About me", description: "Read about me", content: "..."}; // Your blog content
}
export default async function BlogPage() {
const {title, description, content} = await getBlogData();
return (
<div>
// Set title & description without <Head/> components
<title>{title}</title>
<meta name="description" content={description}/>
// Set page content
<p>{content}</p>
</div>
)
}
@xuniorss
Copy link

I don't know if I understood very well, but there's no way to make the head.tsx file dynamic for the folders that contain [slug] ? I'm still a little newbie in NextJS 13.

@Mustak9009
Copy link

export async function generateMetadata({params}: {params: { slug: slugType };}):Promise {
return{
title:params.slug,
description:''
}
}

@Ebrahim-Ramadan
Copy link 

// app/[MovieID]/page.js
import { fetchSingleMovie } from "@/lib/moviesFetch";
export async function generateMetadata({ params }) {
    const movie = await fetchSingleMovie(params.MovieID);
    if (!movie) {
        return {
            title: 'tv.onvo Movies',
            description: 'The requested movie was not found.',
        };
    }

    return {

        title: `${movie[0]['l']} movie`,
        description: `${movie[0]['l']} movie`,
        openGraph: {
            title: `${movie[0]['l']}`,
            description: `watch ${movie[0]['l']} on tv.onvo`,
            images: [
                { url: movie[0]['i']['imageUrl'], width: 800, height: 600 },
            ],
        },
        twitter: {
            card: `tv.onvo movie`,
            title: `${movie[0]['l']} movie`,
            description: `${movie[0]['l']} movie`,
            siteId: `${params.MovieID}`,
            creator: '@onvo_me',
            creatorId: '1467726470533754880',
            images: {
                url: 'https://onvo.me',
                alt: 'onvo Logo',
            },
            app: {
                name: 'twitter_app',
                id: {
                    iphone: 'twitter_app://iphone',
                    ipad: 'twitter_app://ipad',
                    googleplay: 'twitter_app://googleplay',
                },
                url: {
                    iphone: 'https://iphone_url',
                    ipad: 'https://ipad_url',
                },
            },
        },
        alternates: {
            canonical: 'https://onvo.me',
            languages: {
                'en-US': 'https://onvo.me',
                'de-DE': 'https://onvo.me',
            },
            media: {
                'only screen and (max-width: 600px)': 'https://onvo.me/',
            },
            types: {
                'application/rss+xml': 'https://onvo.me/',
            },
        },
        appLinks: {
            ios: {
                url: 'https://onvo.me/',
                app_store_id: 'app_store_id',
            },
            android: {
                package: 'com.example.android/package',
                app_name: 'app_name_android',
            },
            web: {
                url: 'https://onvo.me/',
                should_fallback: true,
            },
        },
        bookmarks: ['https://onvo.me/13'],
        category: 'entertainment',
    };
};

export default async function Page({ params }) {
    const movie = await fetchSingleMovie(params.MovieID);

    if (!movie) {
        return (
            <NoMovies />
        );
    }

    return (
        <div className="flex min-h-screen flex-col items-center justify-between md:px-16 md:mt-4 p-2">
            <h1>{movie[0].l}</h1>
        </div>
    );
}

that's an example of dynamic metadata generated on the server for each movie id slug right after app router '/ home router'

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment