Skip to content

Migrate from Next.js to Astro with improved SEO - #41

Open
nikelaz wants to merge 2 commits into
mainfrom
claude/migrate-nextjs-to-astro-nkA1t
Open

Migrate from Next.js to Astro with improved SEO#41
nikelaz wants to merge 2 commits into
mainfrom
claude/migrate-nextjs-to-astro-nkA1t

Conversation

@nikelaz

@nikelaz nikelaz commented Apr 7, 2026

Copy link
Copy Markdown
Owner

Summary

This PR migrates the RegEx Snippets application from Next.js to Astro, a modern static site generator better suited for content-heavy sites. The migration includes comprehensive SEO improvements with structured data, metadata management, and sitemap generation.

Key Changes

  • Framework Migration: Replaced Next.js with Astro as the primary framework

    • Updated build scripts and configuration (astro.config.mjs)
    • Migrated TypeScript configuration to Astro's strict preset
    • Updated ESLint configuration to support Astro and TypeScript
  • SEO Infrastructure: Added comprehensive SEO support

    • Created src/lib/seo.ts with centralized metadata for all 22 validation pages
    • Implemented Layout.astro with proper meta tags, Open Graph, Twitter Card, and canonical URLs
    • Added JSON-LD structured data support for schema.org markup
    • Configured @astrojs/sitemap for automatic sitemap generation
    • Added robots.txt for search engine crawling directives
  • Component Architecture: Restructured components for Astro

    • Created SidebarApp.tsx wrapper component with Mantine UI integration
    • Added Nav.tsx navigation component with icon-based menu
    • Created individual page wrapper components in src/components/pages/ for each validation template
    • Converted all 22 validation pages to Astro .astro files with proper metadata injection
  • Styling & UI: Enhanced visual presentation

    • Added highlight-theme.css for syntax highlighting with light/dark mode support
    • Created nav.module.css and header.module.css for component styling
    • Added global.css for CSS custom properties
    • Integrated Mantine UI with proper color scheme support
  • Search Functionality: Implemented client-side search

    • Integrated Fuse.js for fuzzy search across validation templates
    • Added autocomplete search in header with keyboard navigation
  • Build & Dependencies: Updated project dependencies

    • Added @astrojs/react and @astrojs/sitemap integrations
    • Maintained Mantine UI and Tabler Icons for consistent design
    • Updated package.json scripts for Astro development workflow

Notable Implementation Details

  • All 22 validation pages (email, phone, date, etc.) now have dedicated Astro pages with SEO metadata
  • The layout system uses Astro's component composition with React islands for interactive features
  • Search data is centralized and reused across the application
  • Color scheme detection respects system preferences with localStorage persistence
  • Syntax highlighting supports 9 programming languages (JavaScript, Python, Rust, Go, Swift, C#, Java, PHP, plaintext)

https://claude.ai/code/session_01TPY3vVrgSCZ2AM5fQq6XPK

claude added 2 commits April 7, 2026 06:10
- Replace Next.js with Astro + @astrojs/react + @astrojs/sitemap
- Create Astro layout (Layout.astro) handling all HTML head, SEO meta tags, Open Graph, Twitter cards, JSON-LD, and Mantine color scheme script
- Create SidebarApp React component (replaces Next.js app router layout) with MantineProvider, AppShell, fuzzy search, and syntax highlighting
- Create Nav component removing next/link and usePathname dependencies
- Add 23 Astro pages (index + all regex pattern pages) with proper metadata and JSON-LD
- Add 23 page wrapper React components combining layout + content
- Migrate seo.ts to src/lib removing Next.js Metadata types
- Auto-generate sitemap.xml via @astrojs/sitemap
- Add static public/robots.txt
- Update ESLint config with TypeScript parser (removes eslint-config-next)
- All 606 tests pass, build produces 23 static pages

https://claude.ai/code/session_01TPY3vVrgSCZ2AM5fQq6XPK
@netlify

netlify Bot commented Apr 7, 2026

Copy link
Copy Markdown

Deploy Preview for regex-snippets failed.

Name Link
🔨 Latest commit 07c418e
🔍 Latest deploy log https://app.netlify.com/projects/regex-snippets/deploys/69d4be85e0faa00008df21d0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants