NextJS 13 – Refactor a complete App to use the App folder and React-Query on the client

Weibenfalk

I’ll show how to refactor a complete NextJS 12 Application into NextJS version 13. I’ll use the new App folder, server components and client components. On the client I’ll also show how to setup React-Query (Tanstack Query) to work in NextJS v13. I’ll also use Typescript.

Here’s the finished project:
https://github.com/weibenfalk/nextjs-13-refactor/

This is the App that is refactored, it’s from my React Course where I build a Movie App:
https://github.com/weibenfalk/react-rmdb-2022-v4

Please note that You’ll need an API key from The Movie DB API. That key should be placed in an .env.local file in the root folder of the project and be named API_KEY

00:00 – 1. Installation and images
10:02 – 2. React-Query setup
23:09 – 3. Fetch on the server & App folder

This is the original tutorial on how to build the App with NextJS 12:
https://youtu.be/Tdp_S_72mSI

Support me by subscribing to this channel ❤️

Do you want to master #react, #gatsby, or #svelte fast? ⏩ 🚀 👩‍🚀
Check out my premium courses at https://www.weibenfalk.com

—

Find me somewhere below:

Linkedin: https://www.linkedin.com/in/thomas-weibenfalk-76356611/
Twitter: https://twitter.com/weibenfalk
Github: https://github.com/weibenfalk
FreeCodeCamp: https://www.freecodecamp.org/news/author/thomas-weibenfalk/
Dev.to: https://dev.to/weibenfalk