How to Upgrade to Nextjs 13.4

2 min readJun 5, 2023

This is my step by step story about upgrading the nextjs 13.2 from pages to app folder. Write this only to document the step that I have taken (also when I forget👍)

Update next, react, react-dom to the latest version.

This part is pretty straightforward, just run some command line to update those 3 and youre done.

Codemod next image

In my case, I never use next/future/image so it will just rename from next/image to next/legacy/image using this command line just like from the docs

npx @next/codemod@latest next-image-to-legacy-image ./pages

If next image also being use in folder such as components folder, you can add ./components after ./pages

After that complete, now let's migrate the next/future/image to the new image component by doing like below

npx @next/codemod@latest next-image-experimental ./pages

Codemod next link

This will remove any anchor tag inside link component just like what the docs said. The command line is

npx @next/codemod@latest new-link ./pages

Change import from `next/router` to `next/navigation`

I found out if I don't change the import there will be error like next router was mounted blablabla.

Create app folder at the root of the project folder

This one pretty straighforward.

Add content in tailwind.config.js

Dont forget to add “./app/**/*.{js,ts,jsx,tsx,mdx}” content in this file.

Update path inside styles folder

In my project, inside the styles folder there are file that load custom icon from the public directory. Before upgrade, the path for the custom icon was like “../../../public/font/…” after the the upgrade, if you have the same case like me, you should change it to /font/…/ . Because if not, the icon wont loaded. It took me several days to figure it out.

Add wrapper for react query, mantine, context, etc

Basically, library that is imported in the _app.tsx, wrap it into a custom component with use client directive, then use it within the app/layout.tsx

Pretty much copy paste what's in _app.tsx into app/layout.tsx

It's like the entry point of the app for me.

Create route within app folder

Basically, replicate what's in pages/api into app/api with some adjustment like rename the file become route.ts and right now there are cookies and headers from next/headers for easier access to the request.

Add use client directive in the file that need it

Add it in file where useState, useEffect is used. Actually, not really all of them, just in the main view file. Because once it defined in a file, all other modules that imported into that file will be considered as client bundle.