DEV Community: Junior Batista

Folder structure for Next JS 13

Junior Batista — Sat, 23 Sep 2023 14:55:43 +0000

As a React framework, Next.js offers a high degree of flexibility in organizing your projects, which can sometimes make it challenging to determine the 'best practices' or to know what approaches others are adopting.

It's important to note that there isn't a one-size-fits-all solution, as each project has its unique requirements. However, here are some ways to structure your projects.

The first decision is whether you want a src folder or not, honestly either way is fine, you don't need to spend too thinking about this, I like having the src folder just because it has been the common practice.

Here is my suggested structure:

Now let's go one by one.

App folder

Nest JS 13 allows us to group routes under the same folder by creating a folder using parentheses (). That way we can group our routes using names that make sense to our application.

If you want to make sure no route is created under a folder you can name that folder starting with an underscore character _.

Components folder

This is self-explanatory, here you will store your react components. Here you have multiple options, you could:

Have all all .tsx/jsx components files directly under. This is good if you have a small app.
Have components with their own folder and an index.tsx/jsx under it. This is good if your components have file dependencies like CSS modules, specific custom hooks, config files, etc.
Another option is to divide your components folder into features and into components grouping related components together. This works well in a big app.

Config Folder

Here is very simple, just store any config file.

Context Folder

Store your react context files

DB Folder

store your database-related files

Hooks Folder

Store your custom react hooks.

Server actions

Next JS allows us to have functions that we can call from the client components that run on the server by using the 'use server' string on top of a function. A good to organize those functions is by creating a server-actions folder.

Vendor Folder

Here you would store code that calls 3rd parties services.

Types/Models folder

If you are using Typescript having a types folder is very useful for having your types easily accessible.

Constant files

Another useful folder to have to have all your constants in one place.

That's it from me,

Let me know what suggestions you have!

How to use NextJs 13 with Redux Toolkit and Typescript

Junior Batista — Fri, 15 Sep 2023 18:49:02 +0000

Intro

NextJs 13 was released with some game-changing features like server-side components, a router, improved TS support, and more. So this might require a few changes in how we write our code especially when using client libraries like Redux.

Here is a quick and simple guide to get started with Nextjs 13 and Redux.

Get Started

Create a NextJs 13 application:


 batch
npx create-next-app@latest

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use src/ directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias? No / Yes
What import alias would you like configured? @/

Then we install the Redux toolkit and React Redux


 batch
npm i @reduxjs/toolkit react-redux

Folder Structure

Normally Redux app would include an app folder with a sub-folder called features. Instead, we are going to create a redux folder and inside a features folder

Inside the redux folder create a store.ts.


 typescript
import { configureStore } from "@reduxjs/toolkit";
export const store = configureStore({
  reducer: {},
});

Should look like this:

Slices

Inside the features folder, we will be saving our redux slices.

Inside the features folder, we will add a todo-slice.ts file:


 typescript
import { createSlice } from "@reduxjs/toolkit";

type Todo = {
  id: number;
  name: string;
  done: boolean;
};

type TodoState = {
  list: Todo[];
  user: string;
};

const initialState: TodoState = {
  list: [],
  user: "todo",
};

export const todo = createSlice({
  name: "todo",
  initialState,
  reducers: {
    addTodo: (state, action) => {
      state.list.push(action.payload);
    },
    removeTodo: (state, action) => {
      state.list = state.list.filter((todo) => todo.id !== action.payload);
    },
    toggleTodo: (state, action) => {
      const todo = state.list.find((todo) => todo.id === action.payload);
      if (todo) {
        todo.done = !todo.done;
      }
    },
  },
});

export const { addTodo, removeTodo, toggleTodo } = todo.actions;
export default todo.reducer;

Store update

Now we need to update the store.ts file to add the reducer and add the RootState and our AddDispatch types to our TS types are always up to date with our slices.



import { configureStore } from "@reduxjs/toolkit";
import todoReducer from "./features/todo-slice";

export const store = configureStore({
  reducer: {
    todoReducer,
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

Redux Provider

We need to create the redux provider now, so let's create a provider.tsx inside the redux folder. On top of the file make sure to add the 'use client' string to tell NextJs this is a client component since all components are server components by default.


 typescript
"use client";
import React from "react";
import { Provider } from "react-redux";
import { store } from "./store";

function ReduxProvider({ children }: { children: React.ReactNode }) {
  return <Provider store={store}>{children}</Provider>;
}

export default ReduxProvider;

Now we need to wrap our provider around our whole app. To do so we will need to change our root layout.tsx file to this.



import ReduxProvider from "@/redux/provider";
import "./globals.css";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <ReduxProvider>{children}</ReduxProvider>
      </body>
    </html>
  );
}

Use Redux

Now let's create a client component that read from the redux store and dispatch events:



"use client";

import { addTodo, removeTodo, toggleTodo } from "@/redux/features/todo-slice";
import { AppDispatch, RootState } from "@/redux/store";
import React from "react";
import { useDispatch, useSelector } from "react-redux";

function TodoList() {
  const todoList = useSelector((state: RootState) => state.todoReducer.list);
  const dispatch = useDispatch<AppDispatch>();
  const [todo, setTodo] = React.useState("");

  const handleSubmit = () => {
    dispatch(
      addTodo({
        id: Date.now(),
        name: todo,
        done: false,
      })
    );
    setTodo("");
  };

  const handleDelete = (id: number) => {
    dispatch(removeTodo(id));
  };

  const handleToggle = (id: number) => {
    dispatch(toggleTodo(id));
  };

  return (
    <div>
      <input
        type="text"
        onChange={(e) => setTodo(e.target.value)}
        value={todo}
      />
      <button onClick={handleSubmit}>Add</button>
      {todoList.map((todo) => {
        return (
          <div key={todo.id} className="flex">
            <input
              type="checkbox"
              checked={todo.done}
              onChange={() => handleToggle(todo.id)}
            />
            {todo.name}

            <button onClick={() => handleDelete(todo.id)} className="ml-auto">
              🗑️
            </button>
          </div>
        );
      })}
    </div>
  );
}

export default TodoList;

Then let's add our component to our home page



import TodoList from "@/components/TodoList";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
        <TodoList />
      </div>
    </main>
  );
}

Here is a simple and quick Nextjs 13 app with Redux and Typescript.

Note: you could create your custom dispatch and selector to include your type by default in the store file.

Please leave your suggestions to help others since this is a high-level and simple quick guide.

Junior The Dev here, keeping up the grind.

Do you use TypeScript with projects only you will touch?

Junior Batista — Sat, 09 Jul 2022 00:49:53 +0000

It's very easy to see the benefits of using TypeScript in projects with multiple programmers. Is it still worth it if you're the only one that will ever touch that project?

How to get a list of your globally installed NPM packages? The easy way.

Junior Batista — Tue, 07 Jul 2020 17:01:03 +0000

If you have use NPM for some time you'd know that you can install packages using the -g flag.

At one point you would like to get a list of all you globally installed packages. You can accomplish that with npm list -g but that will show you an overwhelming list.

For a more user-friendly approach, I would recommend using npm list -g --depth 0 instead.

The inclusion of the --depth 0 flag means that npm will only list the packages at the top level of the tree.

How to install Prettier in VS Code. The easy way.

Junior Batista — Sat, 14 Mar 2020 15:30:38 +0000

Simple guide to get Prettier in Visual Code quick, simple and easy

Open the extesion panel and search Prettier

Then open settings and click on formatting and check the options that works better for you.

That's it! Hope it's helpful!