A simple Next.js application using redux-toolkit and typescript with a proposal folder structure

Published in

blutv

5 min readDec 30, 2021

If you’ve been using React for a long time, you’ll need to use State Manager. For many of us, Redux was considered a de facto state manager because it was as good as it promised to run the state. However, the problem was that I needed a lot of boilerplate code to get started with Redux, and even the simplest apps had a steep learning curve. These complaints were loudly clarified by the developer community, and the team behind Redux noticed them. Enter the Redux Toolkit …

Opinionated, batteries-included toolset for efficient Redux development

Lets start with a little bit of according to them…

Redux Toolkit was originally created to help address three common concerns about Redux:

“Configuring a Redux store is too complicated”
“I have to add a lot of packages to get Redux to do anything useful”
“Redux requires too much boilerplate code”

Considering those points, we are introduced with the new state management as a big savior.

To make long story short, in this post, you are going to be introduced with a small Next.js implementation using Redux-toolkit and Typescript. Main focus would be Redux-toolkit and folder structure and rendering performance. This redux-toolkit implementation is going to work in both client-side and server-side rendering.

Preparation

Running a project is as simple as writing a couple of cli commands.

Execute create-next-app with npm or Yarn
Once the installation is done, you can run your application using:

cd nextjs-blogyarn run dev
#or
npm run dev

Once all the process is done, you should be able to see the app running on http://localhost:3000/

Folder Structure — Trivia!

Folder standart is one of main issues in general. If you’ve worked at least in one project, you might be familiar with where-to-put-this-file issues. There is not a best practice for folder structure but it gets its shape as the project grows. Yet, it varies based on the javascript `framework` you use.

Initially, once you examine your folder structure, you will see the one below;

.
┣ 📂 node_modules
┣ 📂 public
┣ 📂 src
┃ ┗ 📂 pages
┃    ┣ 📂 api
┃    ┃  ┗ 📜 hello.ts
┃    ┣ 📜 _app.tsx
┃    ┣ 📜 _document.tsx
┃    ┗ 📜 index.tsx
┣ 📜 .gitignore
┣ 📜 yarn.lock
┗ 📜 package.json

The first move is to crating folder standards. The purpose of creating these standards; It is to prevent developers from applying different names and locations. Thus, we all want to ensure developers that we all at the same page and look in the same direction.

Here is a proposal folder structure which we think that might satisfy our needs in our example.

.
┣ 📂 node_modules
┣ 📂 public
┣ 📂 src
┃ ┣ 📂 pages
┃ ┃  ┣ 📂 api
┃ ┃  ┣ 📜 _app.tsx
┃ ┃  ┣ 📜 _document.tsx
┃ ┃  ┗ 📜 index.tsx
┃ ┣ 📂 store
┃ ┃  ┗ 📂 slices
┃ ┣ 📂 styles
┃ ┃  ┗ 📜 globals.css
┃ ┣ 📂 ui
┃ ┃  ┣ 📂 components
┃ ┃  ┗ 📂 home
┣ 📜 .gitignore
┣ 📜 yarn.lock
┗ 📜 package.json

pages and ui are tend to be linked.
Folders will be added to uias the pages are added in pages folder. (E.g., everything used inpages/index.tsx such as components, helpers will be put under ui/home folder.)
ui/components will contain shared component.

Down the post, we are going to create UserCard.tsx, store.ts, userSlice.ts so our folder structure will become something like below.

.
┣ 📂 node_modules
┣ 📂 public
┣ 📂 src
┃ ┣ 📂 pages
┃ ┃  ┣ 📂 api
┃ ┃  ┣ 📜 _app.tsx
┃ ┃  ┣ 📜 _document.tsx
┃ ┃  ┗ 📜 index.tsx
┃ ┣ 📂 store
┃ ┃  ┣ 📂 slices
┃ ┃  ┃  ┗ 📜 userSlice.ts
┃ ┃  ┗ 📜 store.ts
┃ ┗ 📂 styles
┃ ┃  ┗ 📜 globals.css
┃ ┣ 📂 ui
┃ ┃  ┣ 📂 components
┃ ┃  ┗ 📂 Home
┃ ┃     ┗ 📜 UserCard.tsx
┣ 📜 .gitignore
┣ 📜 yarn.lock
┗ 📜 package.json

Redux Toolkit

The Redux Toolkit is available as an NPM package.

# NPM
npm install @reduxjs/toolkit# Yarn
yarn add @reduxjs/toolkit

After adding the package to your project, we can start configure our slice and store.

Let’s create a simple store/slices/userSlice.ts file.

Then, it is time to create our store as store/store.ts

The last configuration would be integrate our brand new global state with our main application and we are good to go.

Cool! We have set a slice in the store. You need to go to index.ts and create a view so that you can use the actions and selectors you created with userSlice. this index.ts has already been created as src/pages/index.tsx . So, we are going to add a simple user card that is been called from index.tsx. Let’s create the user card as ui/home/UserCard.tsx

Here in the example, we used material ui but it is not worth to mention. You can go with whatever you like or maybe not use anything.

Our application is nearly done. From now on, we are going to focus on what have we done so far and the other side of the coin.

Basically, we have an initial state and that is state is been rendered at the first time the component renders. Then, you see a button called Change it! . What it simply does is dispatching new state to user name after a couple seconds later as it is pressed. Then, useSelector recognize the changed state and triggers the component rendering blah blah blah… We know everything!

The other side of the coin would be the effect of UserCard.tsx:19 on the component. I am pretty sure that you noticed that line and thought that it is forgotten. No :) It is left on purpose.

Save everything so far and give it a shot!