In this chapter, we will learn how to perform the migration of projects between the App Router and the Page Router in Next.js 13. Both the App Router and the Page Router have different characteristics and ways of handling routes, so it's important to understand how to migrate projects without breaking existing functionality.

Key Differences between the App Router and the Page Router

Before migrating a project between these two routing systems, it's crucial to understand the key differences between the App Router and the Page Router:

• App Router: Introduced in Next.js 13, it offers native support for layouts, advanced data handling, and improvements in the routing system. Routes are managed in the app/ folder.

• Page Router: The traditional routing system, based on the pages/ folder. Here, each file in the pages/ folder represents a route.

Migration Considerations

Migrating a project between these two routing systems involves certain key steps, such as restructuring folders and adjusting functions to fetch data.

Migrating from the App Router to the Page Router

If you are using the App Router and want to migrate your project to the Page Router, you will need to make changes to the file structure and how you handle layouts and data fetching.

1. Move routes from the app/ folder to pages/: Files that were in app/ should now be moved to pages/, and each file within pages/ will represent a route.

2. Replace native layouts with reusable components: As the Page Router does not have native support for layouts, you will need to create a custom layout using common components.

3. Adjust Data Fetching: The App Router handles data fetching differently. In the Page Router, you must use functions like getStaticProps, getServerSideProps, and getStaticPaths to fetch data.

Example of Layout Migration

Suppose you have a native layout in the App Router:

javascript

To migrate this layout to the Page Router, you need to convert it into a reusable component and apply it manually to the pages within pages/.

javascript

Adjusting Data Fetching

In the App Router, data can be fetched directly within routes using hooks like use. In the Page Router, you need to use data fetching functions such as getStaticProps or getServerSideProps.

Example of Adjusting Data Fetching

In the App Router, you might have something like this:

javascript

To migrate it to the Page Router, you will need to use getServerSideProps to fetch the data:

javascript

Migrating from the Page Router to the App Router

If you want to migrate a project from the Page Router to the App Router, the file structure must change from pages/ to app/. Additionally, you should take advantage of new features in the App Router, such as native layouts and direct data handling.

1. Move routes from pages/ to app/: Delete the pages/ folder and create a route structure within app/, with files like page.js to represent each route.

2. Leverage native layouts: Instead of creating custom layouts as in the Page Router, use the nested layout system of the App Router.

Example of Data Fetching Migration

In the Page Router, data is fetched using getStaticProps or getServerSideProps. In the App Router, you can simplify this by using the use hook.

Before in the Page Router:

javascript

After in the App Router:

javascript

SEO Considerations in the Migration

Both the App Router and the Page Router effectively handle SEO, but it's important to ensure routes migrate correctly to maintain SEO performance. Make sure that redirects and rewrites are properly configured to avoid issues with search engines.

Implementing Redirects

If you migrate routes and the URLs change, you must set up redirects to prevent users (and search engines) from encountering 404 errors. You can do this with the next.config.js file:

javascript

Conclusion

Migrating projects between the App Router and the Page Router in Next.js 13 requires adjusting file structures, layouts, and how data is fetched. By following these steps, you can smoothly perform a migration while leveraging the strengths of each routing system.