import Head from 'next/head'; import { useRouter } from 'next/router'; // !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 * If you wish to use a normal image, just specify the path below */ image: 'https://tsnext-tw.thcl.dev/images/large-og.png', }; 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 // !STARTERCONF Follow config for opengraph, by deploying one on https://github.com/theodorusclarence/og // ? Uncomment code below if you want to use default open graph // meta['image'] = openGraph({ // description: meta.description, // siteName: props.templateTitle ? meta.siteName : meta.title, // templateTitle: props.templateTitle, // }); return ( {meta.title} {/* Open Graph */} {/* Twitter */} {/* // !STARTERCONF Remove or change to your handle */} {/* */} {meta.date && ( <> {/* // !STARTERCONF Remove or change to your name */} )} {/* Favicons */} {favicons.map((linkProps) => ( ))} ); } // !STARTERCONF this is the default favicon, you can generate your own from https://realfavicongenerator.net/ // ! then replace the whole /public/favicon folder and favicon.ico const favicons: Array> = [ { rel: 'apple-touch-icon', sizes: '180x180', href: '/favicon/apple-touch-icon.png', }, { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon/favicon-32x32.png', }, { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon/favicon-16x16.png', }, { rel: 'manifest', href: '/favicon/site.webmanifest' }, { rel: 'mask-icon', href: '/favicon/safari-pinned-tab.svg', color: '#00e887', }, { rel: 'shortcut icon', href: '/favicon/favicon.ico' }, ];