wpcodevo / nextjs13-redux-toolkit

In this tutorial, you'll learn how to set up and use Redux Toolkit and RTK Query in your Next.js 13 project. It's worth noting that at the time of writing, Next.js 13 is still in beta.

How to Setup Redux Toolkit in Next.js 13 App Directory

In this tutorial, you'll learn how to set up and use Redux Toolkit and RTK Query in your Next.js 13 project. It's worth noting that at the time of writing, Next.js 13 is still in beta.

Topics Covered

• Setup the Next.js 13 Project
• Setup the Redux Store
  • Define Typed Hooks
  • Define a Custom Provider
• Provide the Redux Store to Next.js 13
• Create the Redux State Slice and Action Types
• Add the Slice Reducer to the Store
• Use Redux State and Actions in the Next.js 13 App Directory
• Create the RTK Query API Service
• Add the RTK Query API Service to the Store
• Use RTK Query in the Next.js 13 App Directory

Read the entire article here: https://codevoweb.com/setup-redux-toolkit-in-nextjs-13-app-directory/

How to Deploy or Self-Host a Next.js Application

This article is your go-to resource for learning how to self-host or deploy your Next.js app on a virtual machine running Ubuntu. Our approach involves leveraging the Ubuntu operating system for your server, configuring the powerful NGINX web server to manage incoming traffic, and implementing PM2 to efficiently handle your Next.js application.

Topics Covered

• Prerequisites
• Setting Up the Next.js Application
• Setting up our Virtual Machine (VM)
• Pointing Domain Name to the Server
• Connecting to the Server via SSH and Updating Server Packages
• Installing Nginx & Certbot
• Installing NPM and PM2
• Installing NVM and Node.js
• Creating the Next.js App or Pulling from Git Repository
• Configuring NGINX
• Launching Site with PM2
• Adding SSL to Domain Name
• Conclusion

Read the entire article here: https://codevoweb.com/how-to-deploy-or-self-host-a-next-js-application/

nextjs13-redux-toolkit's Issues

RTK queries not working with NextJS 13 app router

Hey, thanks for the nice article. However, there are some issues using RTK queries with the NextJS app router specifically during cache invalidation.

Could you please add an example to mutate one of the records without fetching the whole list? Or do you also have the same issues?

Quick Question

Thanks for pulling this together and opening the redux context issue on Nextjs
(vercel/next.js#49557)

Quick Question: Under your app/ dir, you have a global.css and page.module.css. Just to confirm my understanding of how the app dir works, neither the global.css or page.module.css is actually loaded at runtime, correct?

I believe for them to be loaded, you would have to have an explicit import 'page.module.css' or import 'global.css' (that isn't commented out) -> i.e. there is no auto-magically loading of css artifacts

Appreciate any thoughts, I am migrating to the app router and away from mui all at the same time so lots to learn!