nextjs - 💡(How to fix) Fix Page Router Projects to Next.js 14+ Issue [1 comments, 2 participants]

Error Handling

TL;DR

Migrate from Page Router to App Router in Next.js by updating getStaticPaths and getStaticProps to use the new routing API, and refactor custom _app.js and _document.js configurations.

Guidance

• Review the official Next.js documentation on migrating from Page Router to App Router, focusing on hybrid routing and automated codemods for common patterns.
• Update getStaticPaths and getStaticProps in pages/docs/[[...slug]].js to use the new App Router API, considering the complex i18n and documentation path generation.
• Refactor custom _app.js and _document.js configurations to be compatible with App Router, ensuring shared layouts and state management work as expected.
• Consider a gradual migration approach, starting with a small subset of pages to test and validate the changes before applying them to the entire project.

Example

// pages/docs/[[...slug]].js (updated for App Router)
export async function generateStaticParams() {
  // Complex i18n + documentation path generation
}

export async function generateStaticProps({ params, locale }) {
  // MDX content loading with i18n
}

export default function DocPage({ content, toc }) {
  // Refactored Page Router component for App Router
}

Notes

The migration from Page Router to App Router requires careful consideration of the project's specific requirements, such as i18n and custom documentation structures. The official Next.js documentation and automated codemods should be consulted to ensure a smooth transition.

Recommendation

Apply a gradual migration workaround, starting with a small subset of pages, to test and validate the changes before applying them to the entire project. This approach will help minimize disruptions and ensure a stable transition to App Router.