PWA manifest and 404 page

This tutorial covers two optional but useful additions: (1) a web app manifest (site.webmanifest) so your site can be installed as an app on mobile and desktop and theme color is consistent, and (2) a custom 404 page (not-found.tsx) so users see a friendly “page not found” message and a link back home. Both improve UX and polish; the manifest is referenced from your layout metadata.

8. Add basic PWA files (optional)

Create public/site.webmanifest. This file is linked from your layout via metadata.manifest: "/site.webmanifest". Browsers use it for “Add to Home Screen” and theme/background color:

{
  "name": "CK444 Game",
  "short_name": "CK444",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#05070b",
  "theme_color": "#05070b",
  "icons": []
}

Add icons later if you want (e.g. 192×192, 512×512 PNG). You can also add public/og.png (1200×630), public/favicon.ico, and public/apple-touch-icon.png for richer previews and bookmarks.

9. Add a clean 404 page

In the App Router, a file at src/app/not-found.tsx is automatically used when a route doesn’t match or when you call notFound(). Export a default React component that renders your 404 UI (e.g. a card with heading, short message, and “Go Home” link):

import Link from "next/link";

export default function NotFound() {
  return (
    <main className="container" style={{ padding: "48px 0" }}>
      <div className="card">
        <h1 style={{ marginTop: 0 }}>404 — Page not found</h1>
        <p style={{ color: "var(--muted)" }}>
          The page you're looking for doesn't exist.
        </p>
        <Link className="btn btnPrimary" href="/" style={{ marginTop: 12 }}>
          Go Home
        </Link>
      </div>
    </main>
  );
}

Reuse your existing .container, .card, and .btn classes so the 404 page matches the rest of the site. The root layout still wraps this page, so nav/footer from the layout are not shown unless you include them in the layout that wraps the segment where 404 is rendered; for a top-level not-found.tsx, only the layout’s children are replaced by this content.

Next steps

You’ve now set up project, env, CSS, layout, homepage, robots, sitemap, config headers, manifest, and 404. For more, extend the sitemap with new routes and add per-page metadata for each tutorial or article. Back to all tutorials and home.