NextJS
Deep dive into Next.js framework development, covering App Router patterns, server components, static site generation, API routes, performance optimization, deployment strategies, and building modern React applications.
Serving Your Blog as Markdown So AI Agents Can Actually Read It
The article explains how to serve clean Markdown versions of blog posts so AI agents can consume content without HTML noise like navigation, scripts, and cookie banners. It recommends two access patterns: appending .md to post URLs, or using an Accept: text/markdown header for content negotiation. In Next.js, rewrites in next.config.ts route both patterns to an internal /md/posts/[slug] handler. That route fetches the post from Sanity, converts it to Markdown, and returns it with a text/markdown Content-Type and short caching headers. A buildPostMarkdown helper constructs the Markdown document with a title, canonical URL, optional hero image, auto-generated summary, and body converted from Portable Text via @portabletext/markdown. Code blocks stored in Sanity as _type: "code" are correctly rendered as fenced Markdown code blocks with language tags, making them ideal for AI agents and syntax highlighters. A /posts.md index provides a machine-readable sitemap listing all posts with metadata and links, enabling agents to discover and traverse content efficiently using either the .md suffix or Accept header approach.
Building a Pixel Art Converter: From DOOM to Modern Portraits
The project began as a simple DOOM-inspired image converter, evolving into a comprehensive pixel art transformation tool. Initially inspired by DOOM's iconic color palette, the tool recreates the retro look using a 32-color palette with Euclidean distance color matching. As it developed, the tool expanded beyond DOOM aesthetics to include a Portrait palette optimized for human faces, making it suitable for profile pictures and avatars. Key features of the tool include seven color palettes: DOOM, Portrait, Skin Tones, Game Boy, PICO-8, Commodore 64, and Grayscale. It also offers Floyd-Steinberg dithering for smooth gradients, adjustable pixel scaling for a retro look, and PNG export with timestamped filenames. Built with Next.js and the Canvas API, the tool processes images through background removal, pixelation, and color reduction or palette mapping. AI-assisted development played a significant role in the project's rapid iteration and refinement, showcasing how modern tools can accelerate prototyping. The result is a practical tool that blends retro gaming aesthetics with modern web development, available for use at /image-converter.
Building a GDPR-Compliant Cookie Consent System with Sanity CMS
The author decided to build a custom cookie consent solution for their blog to avoid the complexities and privacy issues of third-party libraries. Their solution is fully GDPR-compliant, privacy-first, and integrates with Sanity CMS. The custom implementation includes three main components: a Sanity CMS schema for managing consent content, a React Context for state management, and conditional loading of analytics based on user consent. The system emphasizes accessibility, server-side data fetching, and smart reload logic to ensure a seamless user experience. The cookie banner is designed to be editor-friendly, allowing non-technical users to update content without code changes. The result is a lightweight, under 5KB, GDPR-compliant system that respects user privacy by default, loads no third-party tracking libraries, and provides full transparency with a detailed policy page. Users can withdraw consent at any time, and the system is fully accessible, making it an ideal solution for personal blogs or small sites.
Adding an RSS Feed to My Next.js Blog
The blog now offers a fully-featured RSS 2.0 feed, built with the Next.js App Router and Sanity’s content API, so readers can easily subscribe and stay updated on new posts. The feed includes comprehensive metadata such as titles, descriptions, publication dates, author attribution via the Dublin Core namespace, category tags, and both image and audio enclosures. Auto-generated summaries populate the description field, and the feed is generated server-side at /posts/rss.xml using the same Sanity query as the main site to ensure consistency. Technically, the implementation emphasizes security and performance with proper XML escaping, aggressive caching (one hour with stale-while-revalidate), extended RSS namespaces (Dublin Core, Atom, Content Module), auto-discovery through HTML metadata, and graceful error handling that falls back to an empty feed if needed. The post also highlights why RSS still matters: it gives readers control over how they consume content, preserves privacy by avoiding tracking, remains platform-independent, and bypasses algorithmic filtering so every post reaches every subscriber. Readers can subscribe via any RSS reader using the provided feed URL, gaining access to both text and audio narration for each article.