feat: Partial migration to Next.js App Router and dependency updates #316
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
This commit includes the initial steps of migrating the Hyper website from Next.js Pages Router to App Router, along with updating all dependencies to their latest versions.
**Progress So Far:**
1. **Dependencies Updated:**
* Upgraded `next` to `14.2.3`, `@mdx-js/*` to `3.1.0`, `@next/mdx` to `14.2.3`, and other development dependencies like `husky` and `prettier`.
* Resolved an MDX build error (`Expected component Image to be defined`) by directly importing `Image` and `Video` components into `pages/blog/index.mdx` and removing `MDXProvider` from the `withPost` HOC.
* Replaced `react-highlighter` with `react-highlight-words` to resolve React 18 peer dependency issues.
2. **App Router Setup:**
* Created the `app` directory.
* Created a root layout `app/layout.js`, including global styles, basic HTML structure, and a `<main>` tag.
* Migrated logic from `pages/_app.js` (SearchContext, NProgress, gTagPageView) and `pages/_document.js` (Google Analytics scripts) into `app/layout.js` and a new client component `app/components/navigation-events.js`.
* Deleted `pages/_app.js` and `pages/_document.js`.
3. **Page Migrations (Partial):**
* Successfully migrated the homepage (`pages/index.js`) to `app/page.js`. This involved removing `getStaticProps` and marking the page as a client component due to `styled-jsx` and `useOs` hook. Several supporting components were also marked `'use client'`.
* **Stuck Point:** Attempted to migrate `pages/blog/index.mdx` to `app/blog/page.mdx`. This has been challenging due to a persistent server-side build error: `TypeError: r.createContext is not a function` (or `s.createContext`).
**Troubleshooting Attempts for MDX/Blog Page:**
* Ensured `next.config.js` uses the correct App Router setup for `@next/mdx`.
* Refactored the blog page structure to use a dedicated `app/blog/layout.js` component instead of a Higher-Order Component wrapping MDX content directly.
* Ensured all relevant components in the hierarchy are marked `'use client'` where appropriate.
* Attempted to use MDX v2 `jsxRuntime: 'classic'` option, but it's deprecated in MDX v3.
* Consulted MDX v3 migration guide. The key takeaway for this issue seems to be replacing `MDXContext` with `useMDXComponents`, but our refactoring aimed to simplify component passing, bypassing explicit `MDXProvider` or `useMDXComponents` in the page itself. The error seems to occur at a lower level in the MDX/Next.js server-side rendering pipeline.
The build currently fails due to the MDX issue with `app/blog/page.mdx`. Further investigation is needed to resolve this specific MDX compilation/rendering error in the App Router.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
|
Fix the build |
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.
This commit includes the initial steps of migrating the Hyper website from Next.js Pages Router to App Router, along with updating all dependencies to their latest versions.
Progress So Far:
Dependencies Updated:
nextto14.2.3,@mdx-js/*to3.1.0,@next/mdxto14.2.3, and other development dependencies likehuskyandprettier.Expected component Image to be defined) by directly importingImageandVideocomponents intopages/blog/index.mdxand removingMDXProviderfrom thewithPostHOC.react-highlighterwithreact-highlight-wordsto resolve React 18 peer dependency issues.App Router Setup:
appdirectory.app/layout.js, including global styles, basic HTML structure, and a<main>tag.pages/_app.js(SearchContext, NProgress, gTagPageView) andpages/_document.js(Google Analytics scripts) intoapp/layout.jsand a new client componentapp/components/navigation-events.js.pages/_app.jsandpages/_document.js.Page Migrations (Partial):
pages/index.js) toapp/page.js. This involved removinggetStaticPropsand marking the page as a client component due tostyled-jsxanduseOshook. Several supporting components were also marked'use client'.pages/blog/index.mdxtoapp/blog/page.mdx. This has been challenging due to a persistent server-side build error:TypeError: r.createContext is not a function(ors.createContext).Troubleshooting Attempts for MDX/Blog Page:
next.config.jsuses the correct App Router setup for@next/mdx.app/blog/layout.jscomponent instead of a Higher-Order Component wrapping MDX content directly.'use client'where appropriate.jsxRuntime: 'classic'option, but it's deprecated in MDX v3.MDXContextwithuseMDXComponents, but our refactoring aimed to simplify component passing, bypassing explicitMDXProvideroruseMDXComponentsin the page itself. The error seems to occur at a lower level in the MDX/Next.js server-side rendering pipeline.The build currently fails due to the MDX issue with
app/blog/page.mdx. Further investigation is needed to resolve this specific MDX compilation/rendering error in the App Router.