In Teil 1 haben wir die Basis unseres Next.js 14-Projekts erstellt. In Teil 2 haben wir das Frontend mit Contentful als Headless-CMS, Tailwindcss für das Styling und Typescript für die Programmierung erstellt. In Teil 3 haben wir einen Header und Footer hinzugefügt, sowie die sogenannte Entwurfs-/Vorschaufunktionalität, die von Contentful angeboten wird, und nicht zuletzt den heutzutage obligatorischen Umschalter für den Dunkelmodus. In Teil 4 werden wir eine benutzerdefinierte 404-Seite hinzufügen, eine Lade-UI (SVG-Spinner) und wir fügen unserem tailwind.config.ts einige zusätzliche Farben hinzu.
Hier ist bereits ein Spoiler zum Endergebnis des 4. Teils -> https://nextjs14-full-example-404-loading.vercel.app/
Benutzerdefinierte 404 / Nicht gefunden Seite
Lassen Sie uns eine neue Datei „not-found.tsx“ unter /src/app mit unseren eigenen Inhalt und Styling erstellen.
import { Container } from "@/components/contentful/container/Container";
function NotFoundPage() {
return (
<>
<div className="min-h-full px-4 py-4 sm:px-6 sm:py-24 md:grid md:place-items-center lg:px-8">
<div className="mx-auto max-w-max">
<Container className="mt-5">
<div className="flex mt-6">
<p className="text-4xl font-extrabold text-blue600 sm:text-5xl">
Ups
</p>
<div className="ml-6">
<div className="pl-6 border-l border-gray500">
<h2 className="text-3xl font-bold tracking-tight text-gray900 dark:text-white sm:text-4xl">
Something went wrong! - Etwas ist schief gelaufen !
</h2>
<p className="mt-1 text-lg text-gray500 dark:text-white">
Please select a topic from the tag cloud above or go back
home
</p>
<p className="mt-1 text-lg text-gray500 dark:text-white">
Bitte wählen Sie ein Thema aus der Cloud oben oder klicken
auf Go back home Button
</p>
</div>
<div className="flex mt-10 space-x-3 sm:pl-6">
<a
href="/"
className="inline-flex items-center px-6 py-4 text-sm text-4xl font-medium text-white bg-blue600 border border-transparent rounded-md shadow-sm hover:bg-blue700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue500"
>
Go back home
</a>
</div>
</div>
</div>
</Container>
</div>
</div>
</>
);
}
export default NotFoundPage;Wenn Sie in der oberen linken Ecke von https://nextjs14-full-example-404-loading.vercel.app/ auf „About“ klicken, werden Sie unsere benutzerdefinierte 404-Seite sehen.
Anstatt der Standard-404 Seite
Benutzerdefiniertes UI Loading
Machen wir weiter mit der neuen Datei loading.tsx, die ich unter /src/app erstellt habe.
export default function loading() {
return (
<div className="pt-4 text-center">
<div role="status">
<svg
aria-hidden="true"
className="inline w-10 h-10 mr-2 text-gray200 animate-spin dark:text-gray600 fill-blue600"
viewBox="0 0 100 101"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
fill="currentColor"
/>
<path
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
fill="currentFill"
/>
</svg>
<span className="sr-only">Loading...</span>
</div>
</div>
);
}Da der Ladespinner nur während des anfänglichen Ladens sichtbar ist, habe ich meine Unterseite namens „spinner“ erstellt -> https://nextjs14-full-example-404-loading.vercel.app/spinner, damit Sie ihn in Aktion sehen können.
Die spezielle Datei loading.tsx hilft dabei, eine aussagekräftige Lade-UI mit React Suspense zu erstellen. Mit dieser Konvention können Sie einen sofortigen Ladestatus vom Server anzeigen, während der Inhalt eines Routenabschnitts geladen wird. Der neue Inhalt wird automatisch ausgetauscht, sobald das Rendering abgeschlossen ist. Es ist eine großartige Möglichkeit, die Benutzererfahrung zu verbessern.
Extra Farben in tailwind.config.ts
Ich habe diese Farben im “theme” Bereich von within tailwind.config.ts hinzugefügt
white: extraColors.white,
black: extraColors.black,
indigo: extraColors.indigo,console.log("extracolors", extraColors);zeigt die Farbnamen mit ihrem entsprechenden „Hex-Wert“, die ich aus dem Paket „tailwindcss/colors“ importiert habe.
Ich habe auch andere Farben aus dem Paket „@contentful/f36-tokens“ importiert.
import tokens from "@contentful/f36-tokens";
const colors = Object.entries(tokens).reduce(
(acc: Record<string, any>, [key, value]) => {
// Filter Hex colors from the f36-tokens
if (/^#[0-9A-F]{6}$/i.test(value as any)) {
acc[key] = value;
}
return acc;
},
{} as Record<string, string>
);console.log("colors", colors);
Vervollständigen Sie tailwind.config.ts mit der Integration von „extracolors“ aus tailwindcss/colors und „colors“ über Tokens aus „@contentful/f36-tokens“.
import type { Config } from "tailwindcss";
import tokens from "@contentful/f36-tokens";
const { fontFamily } = require("tailwindcss/defaultTheme");
const extraColors = require("tailwindcss/colors"); //for extra colors e.g. in the Arctile TOC -> emerald
const colors = Object.entries(tokens).reduce(
(acc: Record<string, any>, [key, value]) => {
// Filter Hex colors from the f36-tokens
if (/^#[0-9A-F]{6}$/i.test(value as any)) {
acc[key] = value;
}
return acc;
},
{} as Record<string, string>
);
const config: Config = {
darkMode: "class",
content: [
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
colors,
extend: {
colors: {
emerald: extraColors.emerald,
white: extraColors.white,
black: extraColors.black,
indigo: extraColors.indigo,
},
maxWidth: {
"8xl": "90rem",
},
letterSpacing: {
snug: "-0.011em",
},
boxShadow: {
// light
"tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
"tremor-card":
"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
"tremor-dropdown":
"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
},
borderRadius: {
"tremor-small": "0.375rem",
"tremor-default": "0.5rem",
"tremor-full": "9999px",
},
fontSize: {
"2xs": "0.625rem",
"3xl": "1.75rem",
"4xl": "2.5rem",
"tremor-label": "0.75rem",
"tremor-default": ["1.0rem", { lineHeight: "1.25rem" }],
"tremor-title": ["1.125rem", { lineHeight: "1.75rem" }],
"tremor-metric": ["1.875rem", { lineHeight: "2.25rem" }],
},
lineHeight: {
tighter: "1.1",
},
fontFamily: {
sans: ["var(--font-urbanist)", ...fontFamily.sans],
},
},
},
plugins: [require("@tailwindcss/typography")],
};
export default config;Da die Namen der Farben nicht „gray-600“ oder „blue-600“, sondern „gray600“ und „blue600“ ohne den Bindestrich waren, musste ich die className styles in meinen tsx-Dateien korrigieren. Das ist der Grund, warum viele Dateien geändert wurden. Fassen wir also zusammen.
Hinzugefügt bzw. geänderte Dateien
Modified Files Vercel Projekt URL ->
https://nextjs14-full-example-404-loading.vercel.app/
Github Repo mit vollständigen Code
https://github.com/cloudapp-dev/nextjs14-typescript-app-router-contentful/tree/nextjs14-part4
Wenn Ihnen gefällt, was Sie sehen, dann unterstützen Sie mich bitte mit einem "Clap" oder folgen Sie mir auf medium.com.
