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.

Note

The specifics of epic may be continuously adjusted/updated during the development as needed (e.g., encountering an unexpected errors, add, update, or remove issues)

The issues tracked by this epic as follows:

• Update ESLint version and config file #342
• Update shared Anchor compnent to use new Link component  #343
• Create app directory and the root layout file #344
• Add global font and styles to the root layout #345
• Add custom error file to handle unmatched URLs #347
• Add global shared UI Footer component to the root layout file #348
• Add global shared UI Header component to the root layout file #349
• Add global shared UI BackToTopButton component to the root layout file #350
• Add global shared UI Band component to the root layout file  #351
• Create routes for the legal pages  #352
• Create route for Home page #354
• Create route for About page #355
• other issues go here

Problem or idea

This section will be filled later.

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.

• Refactor the globally shared PageTitle component
• Add to app router

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.

• Add Compendia page to the app router
  • Refactor hooks, context, sub-components

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

Colocation, Project Organization Features

We'll restructure and organize the project's folders/files.

Solution or next step