Conversation
This is the first step in migrating from Next.js to Astro. All existing Next.js code has been moved to the `next-16/` directory to allow: - Running Next.js as a reference during migration - Fresh Astro project initialization in `astro/` directory - Side-by-side comparison of both implementations The Next.js site remains fully functional from the next-16/ directory. Also adds migration research and implementation plan documents.
Set up fresh Astro 5.17.1 project alongside Next.js for incremental migration: - Initialize Astro with React, MDX, and Vercel integrations - Configure Tailwind CSS 4 via @tailwindcss/vite - Set up Content Collections for blog, snippets, and projects - Symlink content from next-16/src/data and public assets - Configure rehype/remark plugins for MDX processing - Add vercel.json for dynamic redirects and caching headers - Copy utility files needed by content components - Create test page verifying content collections work Structure: - astro/ - New Astro project - next-16/ - Original Next.js code (preserved) - thoughts/ - Migration docs (at root) Both projects can run simultaneously: - Next.js: cd next-16 && pnpm dev (port 3000) - Astro: cd astro && pnpm dev (port 4321)
Phase 2 of the Astro migration: - Add Layout.astro and MainLayout.astro base layouts - Copy and adapt React components (Header, Footer, SpinnyHomeLink, etc.) - Remove Next.js dependencies (next/link, usePathname) from components - Add icons, links, and constants - Copy Tailwind config and global styles (globals.css, prose.css)
- Add MainLayout component - Add Hero component and hero-patterns for landing pages - Add PostLayout and ProseWrapper for content pages
Phase 3 of the Astro migration: - Add 404 error page - Add contact-success thank you page - Add about page using misc content collection - Add uses page using misc content collection - Add misc collection to content.config.ts - Fix CSS circular import issue in prose.css
- Add use-fullscreen, use-local-storage, use-temporary-state-react to exclusion list (missing explicit imports from ./components in MDX) - Demo component already supports component prop for ReactDemo wrapper
Add explicit imports to MDX files that were missing them: - blog/event-delegation: import BubblingDemo - snippets/use-fullscreen: import Example - snippets/use-local-storage: import Example, LOCALSTORAGE_KEY - snippets/use-temporary-state-react: import Example All blog posts now render in Astro. Only 4 snippets still excluded: - create-previous-memo (SolidJS) - safe-view-transition (window at module level) - use-copy-react (JSX in Collapse summary) - use-is-mouse-inactive-solid (SolidJS)
Changed summary prop type from string to ReactNode. The use-copy-react snippet still fails due to Astro MDX JSX interop issues, so it remains excluded along with 3 other snippets (2 SolidJS, 1 window at module level).
Comprehensive report covering: - 4 excluded snippets with fix options - Missing features (API routes, magic-sprinkles, comments, analytics) - Missing redirects and sitemap - Priority matrix and quick wins - Testing checklist
Major additions: - Add sitemap integration (@astrojs/sitemap) - Add Plausible analytics proxy via vercel.json - Add Giscus comments to blog and snippet pages - Add SolidJS demo support via esm.sh dynamic loading - Add curl-card API endpoint (/api/curl-card) - Add JSON API for snippets (/api/snippets, /api/snippets/[slug]) Content fixes: - Fix safe-view-transition: wrap window access in typeof check - Fix use-copy-react: simplify Collapse summary to plain string All 35 snippets and 13 blog posts now render successfully.
- Add magic-sprinkles interactive canvas animation - Update MIGRATION_TODO.md to reflect completed status - All 35 snippets and 13 blog posts now working - All features implemented: sitemap, analytics, comments, APIs
reginmarte
approved these changes
Feb 10, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Migrate soorria.com from Next.js 15.5.4 to Astro 5.x using a side-by-side approach:
next-16/directoryastro/directoryMigration Approach
The migration uses a side-by-side structure:
Both projects can run simultaneously:
cd next-16 && pnpm dev(port 3000)cd astro && pnpm dev(port 4321)Remaining Phases
Related Documents
thoughts/shared/research/2026-01-31-astro-migration-research.mdthoughts/shared/plans/2026-01-31-astro-migration.mdTest plan
next-16/