[POC] Gatsby -> NextJS #3120
Draft
[POC] Gatsby -> NextJS #3120
Conversation
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
- Add next.config.mjs with MDX support, image optimization, and security headers - Add lib/mdx.ts with utilities for reading MDX files and extracting frontmatter - Add lib/examples.ts with utilities for loading example files - Add lib/site-config.ts to replace Gatsby's siteMetadata - Add package.next.json as reference for new dependencies and scripts Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Add app/layout.tsx with metadata, head scripts (GTM, OneTrust, Sandpack CSS) - Add app/providers.tsx with client-side providers (UserContext, PostHog, Insights) - Add app/globals.css with Tailwind and Ably UI styles - Add lib/user-context.tsx for client-side user/API key management The user context preserves the existing API key injection flow: 1. Page loads as static HTML (SSG) 2. UserContextProvider fetches session and API keys client-side 3. Falls back to demo key from /ably-auth/api-key/docs Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Add lib/layout-context.tsx for active page/language detection
- Add app/docs/layout.tsx as docs layout wrapper with Suspense
- Add app/docs/DocsLayoutClient.tsx with Header, Sidebars, Breadcrumbs
- Add app/docs/page.tsx to redirect /docs to /docs/getting-started
- Add app/docs/not-found.tsx for 404 handling in docs
- Add app/docs/[...slug]/page.tsx for dynamic MDX pages with SSG
- Add app/docs/[...slug]/MDXPageClient.tsx for client-side MDX rendering
MDXPageClient includes:
- SDK context for code snippet language switching
- WrappedCodeSnippet with {{RANDOM_CHANNEL_NAME}} replacement
- API key injection via useUser context
- MDX components (If, Table, Tiles, Admonition, etc.)
Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Add app/examples/layout.tsx with Header and Container - Add app/examples/page.tsx as examples index page - Add app/examples/ExamplesListPage.tsx with filtering and search - Add app/examples/[id]/page.tsx for individual examples with SSG - Add app/examples/[id]/ExamplePageClient.tsx with Sandpack integration ExamplePageClient includes: - Language switching with URL params - API key injection via useUser context - Sandpack provider with dynamic dependencies - View on GitHub and CodeSandbox buttons - README.md rendering with markdown-to-jsx Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Add scripts/generate-redirects.ts to extract redirects from MDX frontmatter - Add scripts/generate-llms-txt.ts to generate AI/LLM documentation index generate-redirects.ts: - Reads all MDX files and extracts redirect_from frontmatter - Outputs generated-redirects.json for next.config.mjs generate-llms-txt.ts: - Scans all MDX files with title and meta_description - Extracts code languages from content - Organizes pages into categories (Platform, Pub/Sub, Chat, etc.) - Generates language-specific URL variants Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Add vercel.json with deployment settings, headers, and caching rules - Add tsconfig.next.json with Next.js TypeScript configuration and path aliases - Add tailwind.next.config.js with App Router content paths - Add .env.next.example with environment variables template - Add lib/link.tsx as Link component adapter (Gatsby to Next.js) - Add NEXTJS_MIGRATION.md with comprehensive migration guide The migration guide includes: - Complete file listing and directory structure - Step-by-step migration instructions - Component migration requirements - Architecture notes on API key injection - Verification checklist Co-Authored-By: Claude Opus 4.5 <[email protected]>
Update all components to use Next.js App Router patterns: - Replace @reach/router hooks with next/navigation hooks - Replace Gatsby's useStaticQuery/graphql with lib/site-config imports - Replace gatsby-plugin-image with next/image - Add 'use client' directives to all client components Components updated: - Link.tsx: Use next/link and useRouter - Header.tsx, LeftSidebar.tsx, RightSidebar.tsx, Footer.tsx - Layout.tsx, Breadcrumbs.tsx, LanguageSelector.tsx - HiddenLanguageLinks.tsx, PageHeader.tsx, MDXWrapper.tsx - GlobalLoading.tsx, MarkdownProvider.tsx - ExamplesContent.tsx, ExamplesFilter.tsx, ExamplesNoResults.tsx - Changelog.tsx (converted to client-side fetch) Also includes: - Update package.json with Next.js dependencies and scripts - Activate Next.js config files (tsconfig.json, tailwind.config.js) - Copy static assets to public/ directory - Update .gitignore for Next.js static assets Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Extend LayoutContext to include pageContext with frontmatter - Update Footer to read from context instead of props - Add setPageContext to MDXPageClient for page-specific data - Fix LanguageSelector to use Next.js useRouter instead of Gatsby navigate - Remove remarkGfm from MDX options (version conflict causing inTable error) - Rename babel.config.js to babel.config.gatsby.js to use SWC compiler - Remove conflicting Gatsby page files (docs/index, examples/index, sdks/index) - Update tsconfig.json moduleResolution to "node" for TS 4.x compatibility - Add .next/ to .gitignore - Simplify next.config.mjs (MDX handled via next-mdx-remote) Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Add styled HTML components to MDXPageClient (h1-h5, p, lists, links, code) - Add Google Fonts (Manrope, JetBrains Mono) to root layout - Downgrade remark-gfm to v3 for markdown table parsing compatibility - Configure webpack to support SVG imports as both URL (?url) and components - Fix Header logo to use img tag with SVG URL import Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Add @sentry/nextjs package - Create instrumentation.ts for server/edge Sentry init - Create instrumentation-client.ts for browser Sentry init - Add global-error.tsx for React rendering error capture - Wrap next.config.mjs with withSentryConfig - Update .env.next.example with Sentry variables Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Create scripts/generate-markdown.ts to generate static .md files
- Add generate:markdown script to postbuild process
- Update PageHeader to fetch from /docs/{slug}.md
- Add node types to tsconfig.json for build scripts
The markdown files are generated during build and served statically
from public/docs/, enabling the markdown copy/view feature.
Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Add example images mapping to ExamplesListPage from public/images/examples - Update Image component for Next.js compatibility (replace Gatsby image plugin) - Add copy-example-images.ts build script to copy images from src/images/examples - Add max-w-screen-lg centering to examples page layout - Fix React key warning in MDXPageClient processChild function - Update .gitignore to exclude copied example images Co-Authored-By: Claude Opus 4.5 <[email protected]>
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Member
|
This is awesome. I tried to do this with my new AI execution tool https://github.com/mattheworiordan/colony, and it kept going off course. Having had a cursory look at this, where my implementation failed (rewriting/changing core componets) it seems your PR does not do that much. Nice |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Description
Checklist