Copy of Next.js App Router Migration

[nozomione]

--- in progress: editing ---

Context

Next.js v13 introduced the new routing model, App Router, which supports server side components and requires a new project structure. This epic is to track the router migration process from page to app.

The issues tracked by this epic as follows:

• https://github.com/AlexsLemonade/refinebio-web/issues/342
• https://github.com/AlexsLemonade/refinebio-web/issues/343
• https://github.com/AlexsLemonade/refinebio-web/issues/344
• https://github.com/AlexsLemonade/refinebio-web/issues/345
• other issues go here

Problem or idea

This doc will be used to create Epic/file issues for the migration in future sprints. As this is an ongoing work in progress, specifics may change based on the 1:1 chat.

The list of potential issues can be found at https://github.com/AlexsLemonade/refinebio-web/issues/339#issuecomment-2120703500 which will be continuously adjusted/updated as needed.

[!note] Before upgrading to version 14 , we'll use version 13 to migrate from the page router to the app router as it allows incremental router updates. Upgrading from 13 to 14 will be easier and faster once it's completed.

Package Replacement (blocker)

To prevent the Module not found: Can't resolve 'unfetch' error, replace isomorphic-fetch(not actively maintained) with cross-fetch.

Config File

We need to migrate the ESLint config as follows:

1. Upgrade Eslint version by running yarn add -D eslint-config-next@latest

2. Update eslintrc.js

   1. Install eslint-config-next by running yarn add -D @next/eslint-plugin-next.
   2. Clean up no longer required settings based on the new config settings.
   3. Add eslint-config-next to extends property.

3. Run yarn lint and fix newly generated lining warnings/errors

Shared Features

Next.js 13 introduced a new change to the built-in Link component and we need to:

1. Update our Anchor(src/components/shared/Anchor.js) component to use the new <Link> component feature.
2. Adjust codebase as necessary.

App Router

Resource: Project Structure & File Conventions, App Router Incremental Adoption Guide

[!note]

• During the migration, keep _app and _document to prevent the pages/* routes from breaking. Once fully migrated, they can be safely deleted.
• Some hooks and their props need to be removed, replaced, and/or re-imported. And these new hooks are only supported in client components and cannot be used in server components.
• Dynamic routes, context updates for the API, and data fetching are handled in the Data Fetching section below.
• At each step, the numbered items (e.g., ❶, ❷, ❷) represent tickets.

Step 1: Add Top-level Files for App Router

In this step, we'll create the top-level routing files for the app router which are sufficient to build routing files for static pages.

❶ Create app directory and the root layout file

The root layout is a replacement for the _app.js and _document.js files.

1. Create the src/app folder.
2. Create the root layout app/layout.js file.

❷ Add Google Fonts and Global Style to the root layout

❸ Add the globally shared UI components to the root layout

We'll refactor the globally shared UI components and add them to the root layout, and migrate routing hooks as needed.

[!note]

• We'll file a corresponding issue for each component
• Components marked "(later)" are excluded in this step

1. Refactor the globally shared components below:

• Layout
  • Band (refactor sub-components as necessary)
  • ParticlesBg
  • Header (refactor sub-components as necessary)
  • GlobalNav
  • GithubAnchor
  • LogoAnchor
  • NavDropDown
  • NavIcon
  • NavLink
  • Footer
  • Notification(later)
• ErrorPage(later)
• PageTitle(later)

2. Re-import the useRouter hook from next/navigation and clean up the removed router properties (e.g., use the usePathname hook to return pathname, clean up asPath and add a workaround logic for it).

3. Revise the shared contexts below in the corresponding issues:

• BandContextProvider
• DatasetManagerContextProvider(later)
• ModalContextProvider(later)
• RefinebioContextProvider(later)
• SearchManagerContextProvider(later)

(The context provider cannot be used in server components and must be handled using client components.)

❹ Add Custom 404 Error in app

1. Create a not-found.js file for the whole application in app.
2. Import shared/Error/Custom404 into the file.

We may also define a route segment error file per route which will be handled later as needed (e.g., API data fetching per endpoints). See Error Handling.

Step 2: Create Static Routes for Static Pages

Resource: Migrating Pages, Route Group

In this step, we'll create the routing files for static pages and migrate routing hooks as needed.

❶ Create routes for the legal pages

1. Create the route group for the following pages:

• License
• Privacy
• Terms

2. Move components/shared/PageStatic to this route group folder and convert it to a route group layout (e.g., StaticPageLayout)

❷ Create route for About page

1. Create the app/about folder.
2. Define page.js in this folder.

❸ Create route for Home page

1. Create the app/home folder.
2. Define page.js in app folder.

Page Meta Tags (in progress - this section still needs to be defined)

Currently meta tags are added to pages using components/shared/PageTitle. However, next/head has been replaced by the new built-in SEO Metadata API, and we need to adjust the way we handle metadata in each route.

For this change, we'll file a few issues.

Data Fetching (in progress - this section still needs to be defined)

Resource: Migrating Data Fetching Methods, Data Fetching

[!note] The getServerSideProps, getStaticProps, and getInitialProps methods have been replaced with a simpler API.

Project Reorganization (in progress - this section still needs to be defined)

Colocation, Project Organization Features

e.g. ) Move the sub-components in components/About/* to this folder for colocation.

Solution or next step

[nozomione]

Duplicated by accident in Zehub, so closing this issue.