Content tagged with "nextjs"
A canonical duplication error triggered a full SEO audit. Missing sitemaps, absent structured data, no OG images for TILs — a record of pitfalls found and fixed on a Next.js App Router site with locale routing.
How I added a lightweight TIL (Today I Learned) content type by defining a new Velite collection, reusing existing components with minimal adaptation, and integrating into search — all without a single new dependency.
Three patterns worth reusing: Velite's default(false) for safe schema evolution, a MAX_TAGS overflow indicator, and conditionally rendering sections that hide themselves when empty.
A simple metadata-based scoring algorithm that surfaces related articles using shared categories and tags. No ML, no full-text search — just weighted scores and existing helper functions.
Individual category and tag pages existed, but there was no way to browse them all. The interesting part: zero new data-layer code was needed — existing helper functions composed directly into new pages.
Each blog post now gets a unique OG image at build time using Next.js's opengraph-image.tsx convention and Satori. The biggest gotcha? Satori only supports inline Flexbox styles — no Tailwind, no className.
I added a hamburger menu, responsive spacing, and touch targets to a Next.js blog. The real lesson was discovering that CSS backdrop-filter silently turns parent elements into containing blocks for fixed-position children.
How I replaced a broken 3-stage build pipeline with @serwist/turbopack's Route Handler approach — finally making precaching work and unlocking Turbopack as the default bundler.
A deep dive into the architecture behind shinyaz.com — why I chose Velite over Contentlayer, how I handle bilingual content without an i18n library, and the design decisions behind a minimal, monochrome developer blog.
Accessing /ja/nonexistent redirects to /en instead of showing a Japanese 404 page. Both a [...slug] catch-all route and updating the root not-found.tsx to render a 404 UI are required.
Refactored src/lib/i18n.ts into src/lib/i18n/index.ts without changing any of the 50+ import statements using @/lib/i18n. Node.js module resolution falls back to index.ts automatically.
Tag/category detail pages had no way to navigate back to the index page. Fixed by adding an i18n dictionary key and placing a Link before the header.
Tag pages used getAllTags which only queried blog posts, so tags exclusive to TILs returned 404. Fixed by merging TIL tags into the tag aggregation function.
Separate from About and Uses, a Colophon page documents how the site itself is built — tech stack, design principles, and tooling
link rel=alternate alone is invisible to users. Adding an RSS icon and text link to the footer solved feed discoverability
The mermaid library depends on DOM APIs like getBBox, so it can't run in Server Components. Use dynamic import in useEffect and next-themes resolvedTheme for dark mode support.
Omitting the language on fenced code blocks in MDX causes rehype-pretty-code to produce broken HTML. Always specify a language like text for non-code content.
The 'use cache' directive lets you cache the output of any async function — not just fetch — replacing the old fetch-level cache options with a more flexible approach.