# blog | Ege Chelebi | Knowledge Base | Instagit

My blog website.

GitHub Stars: 423

Repository: https://github.com/woosal1337/blog

---

## Articles

### [How to Programmatically Generate robots.txt and sitemap.xml in Next.js 14](/woosal1337/blog/how-to-programmatically-generate-robots-txt-and-sitemap-xml-in-next-js)

Learn to programmatically generate robots.txt and sitemap.xml in Next.js 14. Export MetadataRoute typed functions from app/robots.ts and app/sitemap.ts for dynamic SEO file generation at build time.

- Tags: how-to-guide
- Published: 2026-08-06

### [How to Create Custom MDX Components for Responsive Images and Links in Next.js](/woosal1337/blog/how-to-create-custom-mdx-components-for-responsive-images-and-links-in-next-js)

Learn to create custom MDX components in Next.js. Optimize images with Next/Image and handle links intelligently for responsive content and seamless navigation.

- Tags: how-to-guide
- Published: 2026-08-06

### [How to Add GitHub-Flavored Markdown Support (Tables, etc.) with MDX](/woosal1337/blog/how-to-add-github-flavored-markdown-support-with-mdx)

Easily add GitHub-flavored markdown support like tables and task lists to your MDX blog by installing remark-gfm. Learn how to enable advanced markdown features today.

- Tags: how-to-guide
- Published: 2026-08-06

### [When to Use Framer Motion in a Next.js Project: Lessons from the woosal1337 Blog](/woosal1337/blog/when-to-use-framer-motion-in-a-next-js-project)

Learn when to use Framer Motion in a Next.js project. Discover how to leverage it for physics-based animations and complex sequences while keeping simple transitions in CSS.

- Tags: tutorial
- Published: 2026-08-06

### [How to Use CSS Animations and Transitions in Next.js 14 with Tailwind CSS](/woosal1337/blog/how-to-use-css-for-animations-and-transitions-in-next-js)

Learn to add CSS animations and transitions in Next.js 14 using Tailwind CSS utility classes. Enhance your UI without raw CSS or JavaScript libraries.

- Tags: tutorial
- Published: 2026-08-06

### [Animation Strategy for a Next.js Editorial Site: CSS-First Reveals with IntersectionObserver](/woosal1337/blog/what-is-a-good-animation-strategy-for-a-next-js-editorial-site)

Discover a CSS-first animation strategy for your Next.js editorial site. Use IntersectionObserver and Tailwind for lightweight, accessible reveals without heavy JS.

- Tags: how-to-guide
- Published: 2026-08-06

### [How to Ensure Consistent SVG Line Weight with Non-Scaling Stroke in React](/woosal1337/blog/how-to-ensure-consistent-svg-line-weight-with-non-scaling-stroke)

Learn how to ensure consistent SVG line weight in React using non-scaling stroke. Maintain constant stroke widths regardless of scale transformations for perfect SVGs.

- Tags: how-to-guide
- Published: 2026-08-06

### [How to Generate Contour SVG Logos Using SHA‑256 and a Seeded RNG](/woosal1337/blog/how-to-generate-contour-svg-logos-using-sha-256-and-a-seeded-rng)

Learn to generate unique SVG contour logos with SHA-256 and a seeded RNG. This client-side algorithm creates deterministic, reproducible logos from any input string.

- Tags: how-to-guide
- Published: 2026-08-06

### [How to Use shadcn/ui and Radix UI Primitives in Next.js: A Complete Implementation Guide](/woosal1337/blog/how-to-use-shadcn-ui-and-radix-ui-primitives-in-next-js)

Learn to implement shadcn/ui and Radix UI primitives in Next.js 14. Discover how to build a type-safe design system using Tailwind CSS and a utility-based pattern with this complete guide.

- Tags: how-to-guide
- Published: 2026-08-06

### [How to Implement Scroll-Triggered Animations with Intersection Observer in Next.js: A Production-Ready Guide](/woosal1337/blog/how-to-implement-scroll-triggered-animations-with-intersection-observer-in-next-js)

Implement scroll-triggered animations in Next.js using the Intersection Observer API. Discover a production-ready reusable component with staggered delays and accessibility support.

- Tags: how-to-guide
- Published: 2026-08-06

### [How to Create Reusable Design System Primitives in Next.js: A Complete Guide](/woosal1337/blog/how-to-create-reusable-design-system-primitives-in-next-js)

Build reusable design system primitives in Next.js with a complete guide. Learn to create self-contained components, use Tailwind, and export typed APIs for consistent UI.

- Tags: how-to-guide
- Published: 2026-08-06

### [How to Use next‑mdx‑remote to Render MDX Content in Next.js](/woosal1337/blog/how-to-use-next-mdx-remote-for-rendering-mdx-content)

Learn to render MDX content in Next.js using next-mdx-remote. Dynamically load Markdown files and process them with custom components via a plugin pipeline.

- Tags: how-to-guide
- Published: 2026-08-06

### [How to Manage Video Content with MDX and Supplementary Files in Next.js](/woosal1337/blog/how-to-manage-video-content-with-mdx-and-supplementary-files)

Learn to manage video content in Next.js using MDX and supplementary files. Discover a three-tier architecture for organizing videos efficiently, featuring MDX pages, metadata loading, and asset storage.

- Tags: how-to-guide
- Published: 2026-08-06

### [How to Retrieve Blog Post Metadata Without an External CMS](/woosal1337/blog/how-to-retrieve-blog-post-metadata-without-an-external-cms)

Retrieve blog post metadata from local MDX files using Node.js and gray-matter. Get static generation without an external CMS. Learn how to manage your content efficiently.

- Tags: how-to-guide
- Published: 2026-08-06

### [How to Automatically Compute Blog Post Reading Times in React](/woosal1337/blog/how-to-automatically-compute-blog-post-reading-times)

Learn how to automatically compute blog post reading times in React. Count words dynamically in the browser for an accurate estimate.

- Tags: how-to-guide
- Published: 2026-08-06

### [How to Integrate `next-themes` for Theme Support in Next.js 14](/woosal1337/blog/how-to-integrate-next-themes-for-theme-support-in-next-js)

Integrate next-themes for seamless theme support in Next.js 14. Wrap your layout with ThemeProvider and use the useTheme hook for dynamic theming. Learn how now.

- Tags: how-to-guide
- Published: 2026-08-06

### [How to Structure Next.js 14 App Router Projects Using Route Groups](/woosal1337/blog/how-to-structure-next-js-14-app-router-using-route-groups)

Learn to structure Next.js 14 App Router projects with route groups. Organize routes into folders like (admin) for shared layouts and logic without affecting URLs.

- Tags: how-to-guide
- Published: 2026-08-06

### [How to Implement a Token-Based Design System with CSS Variables and Tailwind](/woosal1337/blog/how-to-implement-a-token-based-design-system-with-css-variables-and-tailwind)

Implement a token-based design system using CSS variables and Tailwind. Define RGB values in CSS and reference them in Tailwind for dynamic theming without rebuilds.

- Tags: how-to-guide
- Published: 2026-08-06

### [How to Manage Blog Content with MDX Files Colocated with Route Components](/woosal1337/blog/how-to-manage-blog-content-with-mdx-files-colocated-with-route-components)

Easily manage blog content with MDX files colocated with route components in Next.js. Simplify your setup, leverage the file system for URLs, and achieve zero-runtime data fetching.

- Tags: how-to-guide
- Published: 2026-08-06

### [How to Use MDX for Content Management in Next.js: A Complete Implementation Guide](/woosal1337/blog/how-to-use-mdx-for-content-management-in-next-js)

Learn to manage content with MDX in Next.js. Embed React components and map custom elements for a seamless authoring experience. Get the complete implementation guide.

- Tags: how-to-guide
- Published: 2026-08-06

### [How to Generate SVG Logos from Post Titles Deterministically: A Technical Deep Dive](/woosal1337/blog/how-to-generate-svg-logos-from-post-titles-deterministically)

Learn to generate deterministic SVG logos from post titles using SHA-256 hashing, pi digits, and harmonic contours. A technical guide for developers.

- Tags: deep-dive
- Published: 2026-08-06

### [How to Implement a Dark Editorial Design System in Next.js](/woosal1337/blog/how-to-implement-a-dark-editorial-design-system-in-next-js)

Learn to implement a dark editorial design system in Next.js. Configure Tailwind CSS, force the dark class, and use ThemeProvider for a locked dark mode experience.

- Tags: how-to-guide
- Published: 2026-08-06

### [How to Set Up a Next.js 14 App Router Blog with MDX and TypeScript](/woosal1337/blog/how-to-set-up-next-js-14-app-router-for-a-blog)

Learn to set up a Next.js 14 App Router blog with MDX and TypeScript. Build a robust data layer, implement dynamic metadata, and optimize your blog for SEO.

- Tags: how-to-guide
- Published: 2026-08-06