{meta.title}

import Head from 'next/head'; import { useRouter } from 'next/router'; import { openGraph } from '@/lib/helper'; // !STARTERCONF Change these default meta const defaultMeta = { title: 'Next.js + Tailwind CSS + TypeScript Starter', siteName: 'Next.js + Tailwind CSS + TypeScript Starter', description: 'A starter for Next.js, Tailwind CSS, and TypeScript with Absolute Import, Seo, Link component, pre-configured with Husky', /** Without additional '/' on the end, e.g. https://theodorusclarence.com */ url: 'https://tsnext-tw.thcl.dev', type: 'website', robots: 'follow, index', /** No need to be filled, will be populated with openGraph function */ image: '', }; type SeoProps = { date?: string; templateTitle?: string; } & Partial; export default function Seo(props: SeoProps) { const router = useRouter(); const meta = { ...defaultMeta, ...props, }; meta['title'] = props.templateTitle ? `${props.templateTitle} | ${meta.siteName}` : meta.title; // Use siteName if there is templateTitle // but show full title if there is none meta['image'] = openGraph({ description: meta.description, siteName: props.templateTitle ? meta.siteName : meta.title, templateTitle: props.templateTitle, }); return ( {meta.title} {/* Open Graph */} {/* Twitter */} {meta.date && ( <> )} {/* Favicons */} {favicons.map((linkProps) => ( ))} ); } type Favicons = { rel: string; href: string; sizes?: string; type?: string; }; // !STARTERCONF this is the default favicon, you can generate your own from https://www.favicon-generator.org/ then replace the whole /public/favicon folder const favicons: Array = [ { rel: 'apple-touch-icon', sizes: '57x57', href: '/favicon/apple-icon-57x57.png', }, { rel: 'apple-touch-icon', sizes: '60x60', href: '/favicon/apple-icon-60x60.png', }, { rel: 'apple-touch-icon', sizes: '72x72', href: '/favicon/apple-icon-72x72.png', }, { rel: 'apple-touch-icon', sizes: '76x76', href: '/favicon/apple-icon-76x76.png', }, { rel: 'apple-touch-icon', sizes: '114x114', href: '/favicon/apple-icon-114x114.png', }, { rel: 'apple-touch-icon', sizes: '120x120', href: '/favicon/apple-icon-120x120.png', }, { rel: 'apple-touch-icon', sizes: '144x144', href: '/favicon/apple-icon-144x144.png', }, { rel: 'apple-touch-icon', sizes: '152x152', href: '/favicon/apple-icon-152x152.png', }, { rel: 'apple-touch-icon', sizes: '180x180', href: '/favicon/apple-icon-180x180.png', }, { rel: 'icon', type: 'image/png', sizes: '192x192', href: '/favicon/android-icon-192x192.png', }, { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon/favicon-32x32.png', }, { rel: 'icon', type: 'image/png', sizes: '96x96', href: '/favicon/favicon-96x96.png', }, { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon/favicon-16x16.png', }, { rel: 'manifest', href: '/favicon/manifest.json', }, ];