typescriptbeginner
Redirect Matrix in next.config
Define URL redirect rules in next.config.ts for SEO migration, vanity URLs, and path normalization.
typescriptPress ⌘/Ctrl + Shift + C to copy
// next.config.ts
import type { NextConfig } from 'next';
const redirects: { source: string; destination: string; permanent: boolean }[] = [
// Old blog paths -> new
{ source: '/blog/:slug', destination: '/posts/:slug', permanent: true },
// Vanity URL
{ source: '/pricing', destination: '/plans', permanent: false },
// Remove trailing slash
{ source: '/:path+/', destination: '/:path+', permanent: true },
// External redirect
{ source: '/docs', destination: 'https://docs.example.com', permanent: false },
];
const config: NextConfig = {
async redirects() {
return redirects;
},
};
export default config;Use Cases
- URL migration after redesign
- Vanity URLs
- Trailing slash normalization
Tags
Related Snippets
Similar patterns you can reuse in the same workflow.
typescriptadvanced
Dynamic OG Image Generation
Generate Open Graph images on-the-fly using Next.js ImageResponse with custom fonts and dynamic content.
Best for: Social media sharing
#og-image#seo
typescriptbeginner
Reusable Metadata Factory
Factory function to generate consistent SEO metadata across all pages with Open Graph and canonical URLs.
Best for: Consistent page SEO
#seo#metadata
typescriptbeginner
Environment Variable Validation
Validate required environment variables at build time with type-safe access and descriptive errors.
Best for: App startup checks
#environment#validation
typescriptadvanced
Next.js Dynamic OG Image Generation
Generate dynamic Open Graph images at build time using next/og for social media sharing.
Best for: Dynamic social media preview images
#nextjs#og-image