upgrade Next.js stable and enhance some pages

app/(home)/about/page.tsx

@@ -1,20 +1,28 @@
 import type { Metadata } from 'next'
 import Link from 'next/link'
+import { HeroSolidChevronDoubleLeft } from '@twistail/icons'
 
 export const metadata: Metadata = { title: 'About - Next.js Tailwind Starter' }
 
 export default function Page() {
   return (
-    <main className='mx-auto max-w-2xl'>
-      <Link
-        href='/'
-        className='group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 dark:invert hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30'
-      >
-        <span className='mr-1 inline-block transition-transform group-hover:-translate-x-1 motion-reduce:transform-none'>
-          &larr;
-        </span>
-        <span>Back to homepage</span>
-      </Link>
+    <main className='content-wrapper flex grow items-center justify-center'>
+      <div className='page-container'>
+        <section className='mx-auto flex w-full max-w-2xl flex-col items-center justify-center py-24'>
+          <h1 className='text-2xl font-extrabold text-gray-900 dark:invert sm:text-3xl lg:text-4xl'>
+            Example About Page
+          </h1>
+          <div className='mt-8 sm:mt-12'>
+            <Link
+              href='/'
+              className='inline-flex items-center rounded-lg border border-gray-200 bg-gray-900 px-6 py-3 text-center text-sm font-medium text-white hover:bg-gray-700 hover:text-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-600'
+            >
+              <HeroSolidChevronDoubleLeft className='-ml-1 mr-1 h-4 w-4' />
+              Back to homepage
+            </Link>
+          </div>
+        </section>
+      </div>
     </main>
   )
 }

app/(home)/page.tsx

@@ -1,8 +1,25 @@
+import type { Metadata } from 'next'
 import Image from 'next/image'
 import Link from 'next/link'
 import { EvaOutlineExternalLinkOutline } from '@twistail/icons'
 
 import { ExternalLink } from '@/components/external-link'
+import VercelLogo from '@/public/images/vercel.svg'
+
+export const metadata: Metadata = {
+  title: 'Next.js Tailwind Starter',
+  description: 'A starter project for Next.js with Tailwind CSS and Typescript.',
+  openGraph: {
+    type: 'website',
+    images: [
+      {
+        url: 'http://next-start.vercel.app/images/og-image.png',
+        width: 2048,
+        height: 1170,
+      },
+    ],
+  },
+}
 
 export default function Page() {
   return (
@@ -11,11 +28,11 @@ export default function Page() {
         <div className='py-16'>
           <div className='text-center'>
             <p className='text-primary-600 text-lg font-semibold sm:text-2xl'>Howdy, developer!</p>
-            <h1 className='mt-4 text-3xl font-bold tracking-tight text-gray-900 dark:invert sm:text-4xl lg:text-5xl'>
+            <h1 className='mt-4 text-3xl font-bold tracking-tight text-gray-900 dark:invert sm:text-4xl lg:text-6xl'>
               Welcome to your new app
             </h1>
             <div className='mx-auto mt-8 max-w-4xl'>
-              <p className='text-lg leading-8 text-gray-500 dark:text-gray-200'>
+              <p className='font-mono text-lg leading-8 text-gray-500 dark:text-gray-200'>
                 This is a starter for Next.js with Tailwind CSS and Typescript. This starter also
                 provides Dockerfile, just in case you want to deploy using containerization or even
                 Kubernetes.
@@ -43,14 +60,7 @@ export default function Page() {
             className='pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0'
           >
             <span className='font-medium dark:invert'>Hosted at</span>
-            <Image
-              src='/vercel.svg'
-              alt='Vercel Logo'
-              className='dark:invert'
-              width={100}
-              height={24}
-              priority
-            />
+            <Image src={VercelLogo} alt='Vercel Logo' className='h-5 w-auto dark:invert' priority />
           </ExternalLink>
         </div>
       </main>

app/layout.tsx

@@ -1,33 +1,19 @@
-import type { Metadata } from 'next'
+import { PropsWithChildren } from 'react'
 import { Inter } from 'next/font/google'
 import PlausibleProvider from 'next-plausible'
 
 import plausibleConfig from '@/constants/analytics'
+import { fontMono } from '@/utils/fontloader'
 import { cn } from '@/utils/helpers'
 
 import '@/assets/styles/globals.css'
 
 const inter = Inter({ subsets: ['latin'] })
 
-export const metadata: Metadata = {
-  title: 'Next.js Tailwind Starter',
-  description: 'A starter project for Next.js with Tailwind CSS and Typescript.',
-  openGraph: {
-    type: 'website',
-    images: [
-      {
-        url: 'http://next-start.vercel.app/images/og-image.png',
-        width: 2048,
-        height: 1170,
-      },
-    ],
-  },
-}
-
-export default function RootLayout({ children }: { children: React.ReactNode }) {
+export default function RootLayout({ children }: PropsWithChildren) {
   return (
     <PlausibleProvider {...plausibleConfig}>
-      <html lang='en' className={cn(inter.className)}>
+      <html lang='en' className={cn(inter.className, fontMono.variable)}>
         <head>
           <meta name='viewport' content='width=device-width,initial-scale=1' />
           <meta name='msapplication-TileImage' content='/favicon.svg' />

app/not-found.tsx

@@ -1,19 +1,34 @@
+import Link from 'next/link'
+import { HeroSolidChevronDoubleLeft } from '@twistail/icons'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = { title: '404 - Page not found' }
+
 export default function NotFound() {
   return (
-    <div className='h-full min-h-screen bg-slate-50'>
-      <div className='flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8'>
-        <div className='mx-auto mt-8 sm:w-full sm:max-w-2xl'>
-          <div className='space-y-4  text-gray-900'>
-            <h2 className='text-lg font-bold'>Not Found</h2>
-            <p className='text-sm'>Could not find requested resource</p>
-            <div className='mt-4'>
-              <a href='/' className='hover:text-primary-600'>
-                &larr; back to homepage
-              </a>
+    <div className='flex h-full min-h-screen w-full flex-col bg-white dark:bg-gray-900'>
+      <main className='content-wrapper flex grow items-center justify-center'>
+        <div className='page-container'>
+          <section className='mx-auto flex w-full max-w-2xl flex-col items-center justify-center py-24'>
+            <h1 className='text-2xl font-extrabold text-gray-900 dark:invert sm:text-3xl lg:text-4xl'>
+              404 - Page not found
+            </h1>
+            <p className='mt-8 text-center text-xl leading-8 text-gray-600 dark:text-gray-300/80'>
+              Sorry, we can&rsquo;t find that page. Check that you typed the address correctly, or
+              try using our site search to find something specific.
+            </p>
+            <div className='mt-8 sm:mt-12'>
+              <Link
+                href='/'
+                className='inline-flex items-center rounded-lg border border-gray-200 bg-gray-900 px-6 py-3 text-center text-sm font-medium text-white hover:bg-gray-700 hover:text-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-600'
+              >
+                <HeroSolidChevronDoubleLeft className='-ml-1 mr-1 h-4 w-4' />
+                Back to homepage
+              </Link>
             </div>
-          </div>
+          </section>
         </div>
-      </div>
+      </main>
     </div>
   )
 }

components/external-link.tsx

@@ -1,17 +1,24 @@
 import { FC } from 'react'
+import Link, { LinkProps } from 'next/link'
 
 import { cn } from '@/utils/helpers'
 
-interface ExternalLinkProps {
+interface ExternalLinkProps extends LinkProps {
   children: React.ReactNode
   href: string
   className?: string
 }
 
-export const ExternalLink: FC<ExternalLinkProps> = ({ children, href, className }) => {
+export const ExternalLink: FC<ExternalLinkProps> = ({ children, href, className, ...props }) => {
   return (
-    <a href={href} className={cn(className)} rel='noopener noreferrer' target='_blank'>
+    <Link
+      href={href}
+      className={cn(className)}
+      rel='noopener noreferrer'
+      target='_blank'
+      {...props}
+    >
       {children}
-    </a>
+    </Link>
   )
 }

constants/analytics.ts

@@ -2,6 +2,6 @@ export default {
   selfHosted: true,
   enabled: process.env.NODE_ENV === 'production',
   domain: 'next-start.vercel.app',
-  customDomain: 'https://stats.ghcr.dev',
+  customDomain: 'https://stats.fltr.dev',
   trackOutboundLinks: true,
 }

next.config.js

@@ -1,5 +1,6 @@
 const { withPlausibleProxy } = require('next-plausible')
 
+/** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
   poweredByHeader: false,
@@ -14,9 +15,8 @@ const nextConfig = {
   },
 }
 
-/** @type {import('next').NextConfig} */
 module.exports = withPlausibleProxy({
-  customDomain: 'https://stats.ghcr.dev',
+  customDomain: 'https://stats.fltr.dev',
   subdirectory: undefined,
   scriptName: undefined,
 })(nextConfig)

package.json

@@ -1,6 +1,6 @@
 {
     "name": "next-start",
-    "version": "13.1.1",
+    "version": "13.4.1",
     "private": true,
     "scripts": {
         "dev": "next dev",
@@ -21,27 +21,27 @@
         "@tailwindcss/typography": "^0.5.9",
         "@twistail/icons": "^0.1.0",
         "clsx": "^1.2.1",
-        "next": "13.3.0",
+        "next": "13.4.1",
         "next-plausible": "^3.7.2",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "tailwind-merge": "^1.12.0",
         "tailwind-scrollbar-hide": "^1.1.7",
-        "tailwindcss": "3.3.1"
+        "tailwindcss": "3.3.2"
     },
     "devDependencies": {
-        "@types/node": "18.15.13",
-        "@types/react": "18.0.37",
-        "@types/react-dom": "18.0.11",
-        "@typescript-eslint/eslint-plugin": "^5.59.0",
+        "@types/node": "20.1.0",
+        "@types/react": "18.2.6",
+        "@types/react-dom": "18.2.4",
+        "@typescript-eslint/eslint-plugin": "^5.59.2",
         "autoprefixer": "10.4.14",
-        "eslint": "8.38.0",
-        "eslint-config-next": "13.3.0",
+        "eslint": "8.40.0",
+        "eslint-config-next": "13.4.1",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-simple-import-sort": "^10.0.0",
         "eslint-plugin-tailwindcss": "^3.11.0",
         "postcss": "8.4.23",
-        "prettier": "^2.8.7",
+        "prettier": "^2.8.8",
         "typescript": "5.0.4"
     },
     "prettier": {