Chore/next app router nextra deps update#238
Conversation
- app: Pages Router → App Router (layout.tsx, providers.tsx, page.tsx, mint/page.tsx) - app: styled-components SSR via SWC compiler (no registry needed), remove _document.tsx - app: metadata/viewport exports replace next/head in _app.tsx - app: Navbar useRouter → usePathname (next/navigation) - docs: nextra ^2 → ^4, next ^14 → ^16, react ^18 → ^19 - docs: src/pages/ → src/content/, _meta.json → _meta.js (ES module exports) - docs: App Router layout with Nextra v4 Navbar/Layout components - docs: theme.config.jsx stripped of deprecated useNextSeoProps/head/useRouter - docs: Card → Cards.Card (Nextra v4 component API change) - docs: mdx-components.tsx added (Nextra v4 App Router requirement) - docs: tsconfig moduleResolution node → bundler for ESM package support - docs: eslint ^8 → ^9, typescript 5.3 → ^5.5 (Nextra v4 peer deps) Co-Authored-By: Oz <oz-agent@warp.dev>
Updates anthropics/claude-code-action to v2 in both workflow files for latest improvements and bug fixes. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Inline theme.config.jsx values into docs/src/app/layout.tsx and delete the file - Remove redundant font-family declarations from globalstyle.tsx (covered by plex.className) - Normalize FileTree indentation to tabs in tap-cap-table.mdx - Remove trailing whitespace in app/src/app/page.tsx Co-Authored-By: Oz <oz-agent@warp.dev>
|
The latest updates on your projects. Learn more about Vercel for GitHub. 2 Skipped Deployments
|
Co-Authored-By: Oz <oz-agent@warp.dev>
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
| </ThemeProvider> | ||
| </Web3Provider> | ||
| ); | ||
| } |
There was a problem hiding this comment.
Consider (medium priority): The migration replaces the ServerStyleSheet-based SSR from the old _document.tsx with just the SWC compiler: { styledComponents: true } setting. That config handles display names and deterministic class generation, but the official Next.js App Router + styled-components docs recommend additionally creating a StyledComponentsRegistry using useServerInsertedHTML to properly collect and inject styles during React streaming SSR.
Without it, you may see a Flash of Unstyled Content (FOUC) in production — especially on first load or slow connections. If your build and dev testing look fine today, this is likely fine to ship, but keep it in mind as the root cause if FOUC is ever reported.
| stakeholder: "Stakeholder", | ||
| transactions: "Transactions", | ||
| "historical-transactions": "Historical Transactions", | ||
| }; |
There was a problem hiding this comment.
Pre-existing (info only): features/factory.mdx and features/cap-table.mdx exist on disk and are linked from features.mdx via <Cards.Card>, but they're absent from _meta.js so they won't appear in the sidebar. This was also the case in the old _meta.json, so it's not a regression from this PR — just flagging it as a gap noticed during review.
| docsRepositoryBase="https://github.com/transfer-agent-protocol/tap-cap-table/tree/main/docs" | ||
| footer={ | ||
| <span> | ||
| Copyright {new Date().getFullYear()} ©{" "} |
There was a problem hiding this comment.
Nit: new Date().getFullYear() is evaluated at build time for this Server Component (which is fine for a static site), but if the docs were ever served in a long-running server process the year would stay fixed to the build date. Not an issue for Nextra's static export — just a style note that a hardcoded 2025 (or whatever the current year should be) would make the intent more explicit.
Code Review SummaryClean migration overall — Pages Router → App Router for the app, Nextra v2 → v4 for docs. All existing functionality is preserved and the new code follows App Router conventions correctly. Prioritized Findings1. styled-components SSR (medium) — 2. Missing 3. What looks good
|
fine Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com>
| if ( | ||
| msg.includes("Failed to fetch") || | ||
| msg.includes("ERR_BLOCKED_BY_CLIENT") || |
There was a problem hiding this comment.
Caution (Low): The "Failed to fetch" pattern is very broad — it will silently swallow any unhandled fetch rejection in the entire app, not just wallet analytics. This could mask real network errors (e.g. failed API calls to your server, failed contract reads).
Consider narrowing by also checking the error's stack or combining it with the other wallet-specific patterns:
if (
msg.includes("ERR_BLOCKED_BY_CLIENT") ||
msg.includes("AnalyticsSDK") ||
msg.includes("pulse.walletconnect") ||
(msg.includes("Failed to fetch") && (msg.includes("walletconnect") || msg.includes("reown")))
) {Not blocking, but worth tightening if you notice swallowed errors during development.
| <P>Based on the <a href="https://www.opencaptablecoalition.com/" target="_blank" rel="noopener noreferrer">Open Cap Table</a> data format, transfer agent protocol is being used by SEC-registered entities.</P> | ||
| <a href="https://paragraph.com/@thatalexpalmer/rwa-tokenization-protocol-stack-1" target="_blank" rel="noopener">Read why this exists</a> |
There was a problem hiding this comment.
Nit (Low): Inconsistent rel attributes on external links. Line 12 has rel="noopener noreferrer" (good), but line 13 only has rel="noopener" (missing noreferrer). Several links on lines 19 and 31 have target="_blank" with no rel at all. Worth standardizing to rel="noopener noreferrer" on all target="_blank" links.
Note: this inconsistency pre-dates this PR, but since the file was touched it's a good opportunity to clean up.
| import Link from "next/link"; | ||
| import Image from "next/image"; | ||
| import { useRouter } from "next/router"; | ||
| import { usePathname } from "next/navigation"; |
There was a problem hiding this comment.
Bug (Medium): With this migration to next/navigation, the external links further down (lines 37/40) still use <Link> for external URLs. Next.js <Link> with target="_blank" silently ignores the target — clicks navigate away instead of opening a new tab. Those should be plain <a> tags with rel="noopener noreferrer":
<a href="https://docs.transferagentprotocol.xyz" target="_blank" rel="noopener noreferrer">Docs</a><a href="https://github.com/transfer-agent-protocol/tap-cap-table" target="_blank" rel="noopener noreferrer">Github</a>The Link import can also be removed if it's only used for the internal / route via LogoRouter (check if that's the case).
Update import in providers.tsx to match the new filename. Co-Authored-By: Oz <oz-agent@warp.dev>
Replace .eslintrc.json with eslint.config.mjs using defineConfig and eslint-config-next/core-web-vitals + eslint-config-prettier. Co-Authored-By: Oz <oz-agent@warp.dev>
Reorder turbopack config, remove unused webpack externals (@gemini-wallet/core, porto). Update auto-generated next-env.d.ts path. Co-Authored-By: Oz <oz-agent@warp.dev>
Replace useConnection with useAccount in useMintIssuer hook and remove ssr option from wagmi adapter config. Co-Authored-By: Oz <oz-agent@warp.dev>
Move MintLayout, Panel, StatusBox, ResponseBlock from wrappers.tsx into new mint.tsx module. Remove unused components: PrimaryButton, FormWrapper, FormInput, FormTextArea, FormValidation, Blockquote, Label, OrderedList, Logotype, Article, Credits, FooterAside. Clean up globalstyle.tsx. Update imports in mint/page.tsx and MintActions.tsx. Co-Authored-By: Oz <oz-agent@warp.dev>
Bump Next.js, React 19, wagmi, viem, styled-components, ESLint 9, TypeScript 5.9, and other deps in root, app, and docs packages. Co-Authored-By: Oz <oz-agent@warp.dev>
Document new mint.tsx module, ESLint 9 flat config, updated component exports, and Layout.tsx rename. Refresh sitemap timestamps. Co-Authored-By: Oz <oz-agent@warp.dev>
1 participant
What?
Migrates the frontend app from Next.js Pages Router to App Router, upgrades the docs from Nextra v3 to v4, and bumps the Claude Code GitHub Action from v1 to v2.
App (app/):
• Replaced _app.tsx + _document.tsx with layout.tsx (server component) and providers.tsx (client component)
• Moved font loading to next/font in the root layout; metadata and viewport are now exported from the layout
• Swapped useRouter from next/router → usePathname from next/navigation in Navbar
• Removed redundant font-family declarations from globalstyle.tsx (covered by plex.className on )
Docs (docs/):
• Upgraded Nextra v3 → v4: migrated src/pages/ → src/content/, _meta.json → _meta.js, added App Router entry files (layout.tsx, [[...mdxPath]]/page.tsx, mdx-components.tsx)
• Removed theme.config.jsx — values inlined directly into docs/src/app/layout.tsx
• Simplified next.config.js to the minimal Nextra v4 form
CI:
• Updated claude-code-action from v1 → v2 in both workflows
Why?
Pages Router is legacy in Next.js 15 / React 19. App Router unlocks proper RSC support, the next/font optimisation pipeline, and the new metadata / viewport export API. Nextra v4 drops its own Pages Router dependency and aligns with the App Router model, which was required to keep the docs building alongside the upgraded app.
Testing
• pnpm dev in app/ — home and /mint pages render correctly, wallet connect button appears only on /mint
• pnpm dev in docs/ — all sidebar nav, MDX pages, FileTree, Cards, and Callout components render correctly
• pnpm build in both packages passes without errors