Next.js 15 migration + next.js 15 static first mdx tutorial

[chrisweb]

• Next.js 15 / React 19 / ESLint 9 flat config migration
• next.js 15 static first mdx tutorial (updated version of my previous nextjs 14 mdx tutorial, lots of changes:
  • tips on using the new typescript nextjs config (next.config.ts)
  • tips for when using turbopack and / or the mdx rust compiler (mdxjs-rs / mdxRs) when using mdx (rehype / remark) plugins
  • migrated from ESLint 8 to 9 and added chapter about creating a custom flat config, also added tips about using a typescript eslint config file (eslint.config.ts by using the new experimental unstable_ts_config flag)
  • migrated components to React 19 (update use of refs, ...)
  • improved opengraph image and dynamic sitemap scripts
  • adjustements due to updates in tools like CNA and the sentry wizard
• the animation is less shiny than before, as currently the bloom filter is disabled, waiting for the react processing PR #302 to get merged

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
chris-lu	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 1, 2025 1:56pm

Copilot reviewed 193 out of 208 changed files in this pull request and generated no comments.

Files not reviewed (15)

• .editorconfig: Language not supported
• .vscode/settings.json: Language not supported
• app/about_me/page.mdx: Language not supported
• app/games/page.mdx: Language not supported
• app/global.css: Language not supported
• app/lego/page.mdx: Language not supported
• app/memes/page.mdx: Language not supported
• .eslintrc.js: Evaluated as low risk
• .no-dead-urls.remarkrc.mjs: Evaluated as low risk
• .remarkrc.mjs: Evaluated as low risk
• README.md: Evaluated as low risk
• app/about_me/opengraph-image.tsx: Evaluated as low risk
• app/error.tsx: Evaluated as low risk
• app/manifest.ts: Evaluated as low risk
• app/loading.tsx: Evaluated as low risk

Comments suppressed due to low confidence (2)

app/lego/opengraph-image.tsx:19

• [nitpick] The function name 'Image' is too generic and ambiguous. It should be renamed back to 'OGImage' to clearly convey its purpose of generating an Open Graph image.

export default async function Image() {

app/memes/opengraph-image.tsx:19

• [nitpick] The function name 'Image' is too generic. It should be renamed to something more descriptive like 'OGImage'.

export default async function Image() {