Upgrade Next.js, Eslint and nextra

[rezrah]

• Upgrades Next.js minimum version to v16 to address reported vulnerabilities
  • Followed migration guide: https://nextjs.org/docs/app/guides/upgrading/version-16
• Upgrades ESLint to v9 because it's required by Next 16
  • Followed migration guide https://eslint.org/docs/latest/use/migrate-to-9.0.0
• Upgrades Nextra as it's required by Next.js 16

Other changes:

• Next.js 16 goes even rurther than 16 with async (lazy) children rendering. Code block previews broke as children weren't traversable anymore. New approach to render them to a ref and read from there (Copilot idea )

[Copilot]

Pull request overview

Updates the project to the Next.js 16 / ESLint 9 toolchain (including Nextra), and adjusts the code-block preview implementation to cope with Next.js’s newer rendering behavior.

Changes:

• Upgrade Next.js (and related deps like @next/mdx) and bump Nextra to meet Next 16 requirements.
• Migrate ESLint configuration from legacy .eslintrc.* to ESLint 9 flat config (eslint.config.js) across workspaces.
• Rework JSX/TSX code block rendering so previews can reliably extract code from rendered children.

Reviewed changes

Copilot reviewed 20 out of 22 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
package.json	Updates dev tooling versions (notably ESLint 9 + related plugins) and introduces root flat ESLint config usage.
eslint.config.js	Adds the new root ESLint 9 flat configuration shared by workspaces.
.eslintrc.cjs	Removes legacy ESLint config in favor of flat config.
packages/theme/package.json	Bumps Next peer/dev versions and updates theme deps for Next 16/Nextra compatibility.
packages/theme/eslint.config.js	Adds theme-level flat ESLint config and React Hooks rules.
packages/theme/.eslintrc.cjs	Removes legacy theme ESLint config.
packages/theme/css/prose.module.css	Adjusts link pseudo-element selectors to better exclude .custom-component content.
packages/theme/components/layout/sidebar/Sidebar.tsx	Uses Object.hasOwn for safer own-property checks.
packages/theme/components/layout/root-layout/Theme.tsx	Removes now-unnecessary ESLint disable comments.
packages/theme/components/layout/nav-drawer/useNavDrawerState.ts	Removes now-unnecessary ESLint disable comments.
packages/theme/components/layout/code-block/CodeBlock.tsx	Removes previous client-side stringification workaround and always delegates to ReactCodeBlock for JSX/TSX.
packages/theme/components/layout/code-block/ReactCodeBlock.tsx	New approach: render children into a hidden ref and read textContent to initialize the live editor/preview.
packages/site/package.json	Upgrades Next + eslint-config-next, updates scripts (adds format, adjusts build and lint).
packages/site/eslint.config.js	Adds site-level flat ESLint config and Next.js plugin rules.
packages/site/.eslintrc.cjs	Removes legacy site ESLint config.
packages/site/tsconfig.json	Updates TS JSX settings and includes additional generated Next type paths.
packages/site/next-env.d.ts	Updates how Next route types are referenced.
packages/site/app/layout.tsx	Removes now-unnecessary ESLint disable comment.
packages/site/src/components/Pre/Pre.tsx	Sanitizes JSX scope keys for live JSX blocks and removes unused lint-disable comments.
packages/site/mdx-components.js	Switches from namespace spread to explicit component exports for MDX component mapping.
.changeset/plain-keys-study.md	Adds release notes for the upgrade.

Comments suppressed due to low confidence (2)

packages/theme/components/layout/code-block/ReactCodeBlock.tsx:152

• When isReady is false, this component renders only a display:none div (no visible fallback). Because ReactCodeBlock itself is dynamically loaded with ssr:false, this can cause the loading UI to disappear and briefly render a blank area until the effect runs. Consider rendering a visible placeholder until isReady (or using useLayoutEffect / initializing from props.code to avoid the empty paint).

      {/* Hidden el to render children and extract text content */}
      <div ref={codeSourceRef} style={{display: 'none'}} aria-hidden="true">
        {props.children}
      </div>
      {isReady && (

.changeset/plain-keys-study.md:14

• The table row ends with an extra trailing . (| ... | 4.6.1 |.), which will render oddly in Markdown. Remove the trailing period so the table formats correctly.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[danielguillan]

Everything seems to be working correctly in the preview. The only issue I've spotted is that headings with anchors now show an underline. Not sure if this is related to the updates though.