Forem: Femi Abimbola

Setting up Express with Typescript, Prettier and Eslint in post-2026

Femi Abimbola — Mon, 05 Jan 2026 23:06:39 +0000

So you want to setup express with Typescript in the right way in post 2026 right? Let me show you how!

Before setting up, ensure you have Node.js installed. Version 20+ or later is highly recommended.

To check if you have Node.js installed. Type the command in your terminal

node --version

You should see something similar to this

v22.20.0

Step 1: Initialize the Project

Let's create the project directory and initialize the project

mkdir express-typescript-project   //This create the project directory
cd express-typescript-project      // This enter the project directory
npm init -y  //This create package.json with the default setting

Step 2: Install Express dependencies

Install express and its corresponding dev dependencies

npm install express    //This install express as dependencies
npm install -D typescript @types/node @types/express

Step 3: Install typescript run time

tsx is significantly faster, requires zero configuration for ESM

npm install --save-dev tsx

Step 4: Configure TypeScript

Generate a tsconfig.json file to configure the TypeScript compiler

npx tsc --init

Open tsconfig.json and replace it with this

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true, 
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "sourceMap": true, // Helpful for debugging
    "resolveJsonModule": true, // Let's you import .json files
    "noImplicitReturns": true, // Forces better logic flow
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Step 5: Create the index File

Create a src directory and add an index.ts file inside it:

mkdir src // This create the source folder
touch src/index.ts  //Create the index.ts

In the index.ts file, write the following code

import express, { Request, Response } from 'express';

const app = express();
const port = process.env.PORT || 8000;

app.get('/', (req: Request, res: Response) => {
  res.send('Hello, TypeScript + Express!');
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

Step 6: Update the Scripts in your package.json file is updated

  "scripts": {
    "dev": "tsx watch src/index.ts",
    "build": "tsc",
    "start": "node dist/server.js",
    "start:prod": "npm run build && npm run start",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "format": "prettier --write \"**/*.{ts,js,json,md,yml,yaml}\""
  },

Ensure your package.json has the type module

 "type": "module",

build: Compiles TypeScript to JavaScript in the dist folder.
start: Runs the compiled JavaScript.
dev: Runs in development mode with auto-reloading.
lint:fix Fixes the linting issues

Step 7: Run the Application

For development: npm run dev
For production: First build with npm run build, then npm start

Visit http://localhost:8000 in your browser to see the "Hello, TypeScript + Express!" message.

Setting up Redux Toolkit in NextJs

Femi Abimbola — Sun, 30 Nov 2025 13:31:27 +0000

Managing global state in modern web applications is important for scalability. While Next.js provides powerful server-side capabilities, managing client-side state across complex component trees often requires a robust solution. That is where Redux Toolkit comes in.

Redux Toolkit is the official, opinionated, battery-included toolset for efficient Redux development. That is, it is recommended by the creators of Redux. However, integrating it with the Next.js requires a specific approach because of the distinction between Server and Client Components in Next.js. Since the Redux store relies on React Context, it must be implemented strictly within the client boundary.

In this guide, we will set up a type-safe Redux store, create slices, and integrate them seamlessly into a Next.js application.

Step 1: Install Dependencies

First, we need to install the core libraries. We need the toolkit itself, the React bindings, and the TypeScript types.

Run the following command in your terminal

npm install @reduxjs/toolkit react-redux @types/react-redux

Step 2: Organize Your Directory

It is best practice to keep your state logic organized. Create a folder named redux (or lib/redux) at the root of your project. This is where your store, hooks, and providers will live.

Inside this folder, create a subfolder called features to hold your slices.

Step 3: Create a Slice

A "slice" is a collection of Redux reducer logic and actions for a single feature of your app. Let's create a counter example.

Create redux/features/counterSlice.ts:

import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { RootState } from "../store";

interface CounterState {
  value: number;
}

const initialState: CounterState = {
  value: 0,
};

export const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state) => {
      // Redux Toolkit allows us to write "mutating" logic in reducers.
      // It doesn't actually mutate the state because it uses the Immer library.
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;

// Selector to access the data from the store
export const selectCount = (state: RootState) => state.counter.value;

export default counterSlice.reducer;

Step 4: Configure the Store

Now, we need to create the store that brings all slices together.

Create redux/store.ts:

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./features/counterSlice";

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

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

Step 5: Create Typed Hooks

While you can use the standard useDispatch and useSelector from react-redux, it is better to create typed versions. This saves you from having to define (state: RootState) every time you select data and ensures your dispatch handles thunks correctly.

Create redux/hooks.ts:

import { useDispatch, useSelector } from "react-redux";
import type { RootState, AppDispatch } from "./store";

// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
export const useAppSelector = useSelector.withTypes<RootState>();

Step 6: Create the Provider

This is the most critical step for Next.js App Router applications. Because Provider uses React Context, it must be a Client Component. We cannot render it directly in a Server Component (like layout.tsx) without isolating it first.

Create redux/provider.tsx:

"use client";

import { store } from "./store";
import { Provider } from "react-redux";

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

Step 7: Integrate with the Root Layout

Now that we have a client-side Provider, we can wrap our application's children with it in the root layout.

Open app/layout.tsx:

import { Providers } from "@/redux/provider";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

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

Step 8: Using Redux in Components

You are now ready to use the state in your application. Remember, any component using hooks must be a Client Component ("use client").

Here is the example Counter component:

"use client";

import { useAppSelector, useAppDispatch } from "../redux/hooks";
import { decrement, increment } from "../redux/features/counterSlice";

export function Counter() {
  // Use the typed hooks we created earlier
  const dispatch = useAppDispatch();
  const count = useAppSelector((state) => state.counter.value);

  return (
    <div style={{ padding: "20px", textAlign: "center" }}>
      <button
        aria-label="Increment value"
        onClick={() => dispatch(increment())}
        style={{ marginRight: "10px" }}
      >
        Increment
      </button>

      <span style={{ fontSize: "20px", fontWeight: "bold" }}>
        {count}
      </span>

      <button
        aria-label="Decrement value"
        onClick={() => dispatch(decrement())}
        style={{ marginLeft: "10px" }}
      >
        Decrement
      </button>
    </div>
  );
}

Conclusion

Setting up Redux Toolkit with Next.js requires careful separation of Server and Client logic. By creating a dedicated Providers component, you can enjoy the robust state management of Redux without sacrificing the performance benefits of Next.js Server Components.