Incubator to to get me up to speed and test Next JS 14.0, Redux Toolkit 2.0, Redux core 5.0, Reselect 5.0, and Redux Thunk 3.0. i.e. all the latest versions at time of testing. I will try to keep this updated with minor version package changes, but will create a new repo for Next major version changes.
- Simple Counter Actions with thunks
- Todo List with simple Redux Actions
- Asynchronous Thunks (including entity persistence & fetch with placeholder data)
- EntityAdapter CRUD UI and persistence with client side thunk fetch
- EntityAdapter CRUD UI and persistence with server side fetch + client component props injection
- Relational EntityAdapater CRUD (Simple library feature with synchronised Author - Article updates)
- Deeply Nested (RSC) Suspense and Error handling demo
- Streaming data from sockets to client components for simulateneous updates across machine boundaries
- Parallel routes demo
- TBD, so many features to choose from!
This might break from time to time. Feel free to fork it so you can do the same at your leisure.
or fork and run on localhost:3000
To run in a container: docker-compose up -d
To run locally: npm i, npm run dev, then visit localhost:3000
docker-compose.yml contains environment variables to route to app using my specific docker setup. Change environment variables according to your own system setup.
Always run npm commands inside the container as it is running a higher version of node and npm than the host. trying to install anything from the host will break the package-lock file so always run npm in the container
This example shows how to integrate Next.js with Redux Toolkit.
The Redux Toolkit is a standardized way to write Redux logic (create actions and reducers, setup the store with some default middlewares like redux devtools extension). This example demonstrates each of these features with Next.js
Deploy the example using Vercel:
Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:
npx create-next-app --example with-redux with-redux-appyarn create next-app --example with-redux with-redux-apppnpm create next-app --example with-redux with-redux-appDeploy it to the cloud with Vercel (Documentation).