DEV Community: Oscar

How to deploy a NextJS app on AWS Fargate with Terraform

Oscar — Fri, 08 Sep 2023 15:49:36 +0000

Introduction

In this guide, you will learn how to deploy a NextJS Node server on AWS ECS Fargate. This is an easy and scalable way to deploy a Dockerised NextJS project. It also makes it easy to add more environments and keep a clean separation between them while making changes to them all through a git repository (no dashboard fiddling!). This is my personal approach to deploying new projects

If you’re reading this, then you’ve probably already got your own reason to want to deploy NextJS on AWS (with Terraform). If not, here are some good ones:

No Github account restrictions - no matter if you are deploying from a org repo or a private, AWS treats it all the same (unlike Vercel).
Easily manage sensitive environment variables with Github secrets and spin up multiple separate environments.
Use node in-memory cache straight out of the box. Your server will have a persistent state (unlike Lambda!) which means database connections are also no problem.
Infrastructure as code - clone the sample repo, add your own AWS keys and push to Github. Simple as that!
Use up some of those AWS credits you have lying around and collecting dust.

You will learn how to get started right away, and then the steps after, I will try to explain what is going on.

Quickstart

I will cut to the business and show you how to get up and running as quickly as possible. It will be a simple process and you will not have to touch the AWS console… Much!

Get your AWS keys — Get hold of your AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY credentials from your AWS account. Store these in a safe place, you will need them later.
Create an S3 bucket — This will be needed for your remote Terraform state. Leave everything as default and give it a unique name like “[your name]-terraform-state”. Remember this name!
Clone my repo (make sure to give it a star first ⭐️) and push a private copy to your own Github account.
In the cloned repo, edit the backend.tf file, change bucket = "YOUR_BUCKET_NAME” to the value you created earlier. Commit and push.
In the settings tab for your newly-published repository, click on Secrets and variables > Actions. Add the following secrets secrets: AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY (the ones from step 1).
You are now ready to deploy — In the Actions tab of your repo, you should see an action called “Deploy Prod” on the sidebar. Click the action and then press run workflow. Wait for it to complete and your app should now be deployed! But where is it?
You can find the temporary URL that hosts your site by going onto your AWS dashboard > EC2 > Load balancers > (your load balancer). Where it says DNS Name, that is your app’s live url. We will talk later about routing this through a domain with a DNS of your choice (like Cloudflare).

Architecture

So you’ve just deployed the app, but what is actually going on? If you read through the Github workflow, you can get a rough idea, but here is a diagram to show in slightly more detail.

Firstly, an ECR repository is provisioned with terraform (ecr.tf). An ECR repo is just a directory which holds tagged docker images. The Docker image is then built and pushed to the ECR for later use. Afterwards, the rest of the terraform infrastructure if provisioned (load balancer, ECS, security groups, etc) and a new ECS task is created, which references the just-uploaded Docker image. The ECS the spins up the docker image as a Fargate task with the given parameters (and environment variables) specified in the task definition.

Terraform and multiple environments

Looking in the terraform directory, you will see that there are two subdirectories: module and prod. The prod directory is the entry-point of the Terraform. If you look in main.tf, you will see that the main sources the module dir while injecting a series of custom variables. The idea is that if you copy and paste the prod directory as dev (for example) and find and replace all instances of prod in that dir to dev, you will be able to spin up a second environment which can source the terraform module in the same way!

Runtime environment variables are injected into the task definition (task.tf) and are loaded in on the terraform plan workflow step of the Github action. You can make any variable visible to Terraform by adding a TF_VAR_ prefix. Terraform will ignore the TF_VAR_ prefix and interpret the rest as a variable. All variables loaded from actions need to be defined in prod/variables.tf and all variables referenced in terraform/module need to be injected by main.tf and also defined in module/variables.tf.

Using a custom domain

Hosting your app from an AWS-generated, non-HTTPS load balancer url is not ideal. If you want to use a custom domain, you can add that domain to Cloudflare, and then create a cname DNS record which points to this load balancer url. You should now be able to access your app from a HTTPS connection on your custom domain. To prevent internet access from the original load balancer domain, you can blacklist all IP addresses, apart from IP ranges owned by Cloudflare. This ensures that the only route to your site is through Cloudflare’s network.

Adding a Postgresql database

The great thing about Terraform is that when you want to add new infra, you don’t have to lay a finger on the AWS dashboard. We can spin up an RDS database and load the DATABASE_URL straight into our app, just by changing a few lines.

To add the database, search in the whole repo for the words “UNCOMMENT FOR DATABASE” and you will see indicated lines to uncomment. After doing this, a postgres database should spin up on the next deployment.

If you want to pass the environment variable DATABASE_URL into your app, add the following lines to the environment array in your ECS task definition.

// task.tf
{
    "name": "DATABASE_URL",
    "value": "postgresql://${var.db_username}:${var.db_password}@${aws_db_instance.db.endpoint}"
}
// ...

WARNING: This RDS instance will be an all-open access. In a production environment, you will not want to expose your database to the internet and instead hide it behind a VPC or narrowly limit the IP addresses which can connect to it.

Summary

Hopefully this has been a useful guide to get you up and running with Terraform and AWS Fargate. Terraform can be a little bit of a learning curve, but once you understand how it executes and how it manages state, it becomes an valuable and flexible tool. If you have any specific questions or feedback about this article, you can get in touch with me via oscars.dev and in case you missed it before, here is a link to my repo to get started with NextJS, Fargate and Terraform. Enjoy! https://github.com/OZCAP/nextjs-fargate-terraform

Building bulletproof ExpressJS APIs with Zod

Oscar — Sat, 18 Feb 2023 14:27:01 +0000

Introduction

As a fullstack developer, building robust API endpoints with good error handling is a very important skill. This post will show how the Zod schema validation/declaration library can be used to make solid API endpoints with good error feedback in a few lines of code.

What is Zod?

Zod is a schema validation npm library used to check types at runtime. Sounds neat but why do we need this? Isn’t that exactly what Typescript is for? Well Typescript types are great, but they only really help during development. While Typescript types do offer some runtime checking, it is not as comprehensive as Zod. Specifically, Typescript types only validate that the expected properties exist, while Zod can validate the values of those properties.

Here’s an example of a Zod schema object:

const schema = z.object({
    user: z.object({
        firstName: z.string().min(2),
        lastName:z.string().optional(),
        age: z.int(),
        email: z.string().email()
    })
})

We can then process some data using this schema with the safeParse() function

const data: unknown = ...

const parsedData = schema.safeParse(data);

if (parsedData.success) {
    const safeData = parsedData.data
    // safeData passes validation and is safe to use! ☑️
}

By parsing the data through our Zod schema object, we can guarantee that safeData object contains a user with a firstName string property of at least 2 characters long, a lastName property (either string or undefined), an integer age and a valid email address. All this is done in a few lines of code. For the next step, we will look at how we can implement this on an Express JS endpoint.

Using Zod with Express

For this demo, we will validate common request headers on an Express route using Zod using middleware. Any handler in the same context of this middleware will also have the same validation. We will start this task by making a schema for our validation.

Schema

We want to make sure every request has a header guest-user-id with a prefix of gid- and a minimum length of 12 characters.

const requestSchema = z.object({
  headers: z.object({
    "guest-user-id": z.string().min(12).startsWith("gid-"),
  })
});

Middleware

Next, we want to create a middleware function which checks the input data against the schema and returns a 400 (bad request) if the input is invalid.

app.use((req, res, next) => {
  const input = requestSchema.safeParse(req);
  if (!input.success) {
    return res.status(400).send(input.error.issues);
  }
  res.locals = input;
  next();
});

This function sends all of the issues with the Zod parsing as a response which outlines the parameters which did were not valid and why. We then set the cleaned data in res.locals. This does not send any data back but it is just a way of setting custom data in our request lifecycle which can be picked up at any point later down the line.

For example, if we send a bad request with the guest-user-id header set with a value of guest-123, we get a full list of all of the issues with our request. This makes debugging issues very easy.

[
    {
        "code": "too_small",
        "minimum": 12,
        "type": "string",
        "inclusive": true,
        "exact": false,
        "message": "String must contain at least 12 character(s)",
        "path": [
            "headers",
            "guest-user-id"
        ]
    },
    {
        "code": "invalid_string",
        "validation": {
            "startsWith": "gid-"
        },
        "message": "Invalid input: must start with \"gid-\"",
        "path": [
            "headers",
            "guest-user-id"
        ]
    }
]

Warning: Do not include sensitive information in the Zod validation schema (like API tokens) while returning input.error.issues, as requestors will be able to see why their request was rejected and thus, exposing the sensitive information. These checks should be handled separately with the appropriate error code (like HTTP 401) and Zod errors should not be sent back.

Endpoint handler

Finally, we can access the safe input on the handler from the res.locals where we set it in the middleware. We can also make this input Typescript safe by defining the input as the inferred type of the Zod schema.

app.get("/", (req, res) => {
  const input = res.locals as z.infer<typeof requestSchema>;
  const guestUserId = input.headers["guest-user-id"];

  return res.send({ message: `Your guest user ID is ${guestUserId}` });
});

All together now!

Here is the full endpoint with all of the above steps put together. As you can see, in not very many lines of code, we have a robust and strongly-typed API.

// schema
const requestSchema = z.object({
  headers: z.object({
    "guest-user-id": z.string().min(12).startsWith("gid-"),
  })
});

// middleware
app.use((req, res, next) => {
  const input = requestSchema.safeParse(req);
  if (!input.success) {
    return res.status(400).send(input.error.issues);
  }
  res.locals = input;
  next();
});

// endpoint handler
app.get("/", (req, res) => {
  const input = res.locals as z.infer<typeof requestSchema>;
  const guestUserId = input.headers["guest-user-id"];

  return res.send({ message: `Your guest user ID is ${guestUserId}` });
});

The old-school alternative

If we wanted to implement the same safety without Zod, our middleware function would look something like this. That’s a lot of code to validate one property. If we have multiple properties, you can imagine how large this validation function would be! This type of validation is prone to errors and can quickly become unwieldy when dealing with multiple properties, whereas Zod provides a more streamlined and less error-prone solution.

router.use((req, res, next) => {
  const guestUserId = req.headers.guestUserId;
  if (typeof guestUserId !== "string") {
    return res.status(400).send({ message: "guestUserId is missing" });
  }
  if (guestUserId.length < 12) {
    return res.status(400).send({ message: "guestUserId is too short" });
  }
  if (!guestUserId.startsWith("gid-")) {
    return res.status(400).send({ message: "guestUserId is invalid" });
  }

  res.locals = { guestUserId };
  next();
});

Summary

In this blog post, we explored how to use Zod, a TypeScript-first schema validation library, to validate data in Express APIs. We looked at how Zod makes it easy to define and validate data schemas on the fly, and how it can help catch errors early in the development process. By integrating Zod with Express, we can ensure that only valid data is accepted by our APIs, and that any invalid data is rejected with informative error messages in few lines of code.

Validating data is an essential part of building secure and reliable APIs, and Zod provides a powerful and convenient way to do so. By adopting best practices like data validation, we can build more robust applications and avoid common security vulnerabilities.

If you're interested in learning more about building secure and reliable software, be sure to check out my other article on hacking BeReal. In it, we explore Bereal’s API endpoints and intercept requests to upload whatever photos we like.

Create Vite/NextJs projects with Tailwind pre-configured, in a single command!

Oscar — Fri, 19 Aug 2022 07:22:00 +0000

While boiler-plating react projects over and over again with the same dependencies, I decided to make a tool which would make my life (and hopefully some other peoples’ lives!) slightly easier. Not only does this tool install Tailwind as a dependancy but it also configures your project's CSS and Tailwind config asynchronously so it works straight out of the box!
I also decided to make this tool Typescript as default because we all love strict type-safety ❤.

Introducing Quick Init!

Quick-init makes creating a Vite/Next-Typescript-Tailwind project as easy as quick-init [name]! ⚡ (Just add -t next for NextJs).

Aside from wanting to build a tool which I would personally find useful, I took the opportunity to build Quick-init in Rust in order to improve my lacking familiarity with the language and to also make it blazingly fast™, as building something useful with a clear functionality goal is the best way to learn something!

It is also fully-customisable with a local configuration file so you can define which dependencies you want to be auto-installed for each template.

Installation (Homebrew)

If you want to install this on Mac OSX with Homebrew, you can install it via a single line on your favourite terminal!

brew tap ozcap/quick-init && brew install quick-init

Source Code

If you want to build this from source, make a pull request or simply browse the code behind this then you are more than welcome to see the Github repository! (Feel free to give a star... Or not).

Hacking BeReal - A practical lesson on “Man in the Middle” attacks

Oscar — Thu, 18 Aug 2022 16:34:00 +0000

What is BeReal?

BeReal is a new social media app which is said to be more “in the moment” compared to conventional social media platforms. The premise of the app is that once per day, everyone gets a notification (at the same time) saying “It’s time to Be Real!” Everyone then has two minutes to take a picture of what they’re doing at that moment. The phone simultaneously snaps a front and back camera photo, before uploading it to their feed for all (friends) to see. There is no option to choose existing photos to upload or make edits to photos. You must post as you are, in the moment.

I wanted to see how much I could manipulate BeReal with the use of a software called Mitmproxy between my iPhone and my Macbook. This software allows me to see all unencrypted HTTPS requests made between my phone and the internet. With this tool, I have the ability to view, pause, edit and cancel any requests at my will. This software also has a Python API for writing custom scripts which I will touch on later.

Notable domains

I spent some time using the app and learning which endpoints were associated with which functions. With this information, I am able to build a profile of how this app works. I knew already that BeReal was built on top of Firebase but there seem to be an additional endpoint to handle certain requests.

firebasestorage.googleapis.com - Firebase cloud storage, used to upload files (images).
us-central1-alexisbarreyat-bereal.cloudfunctions.net - Firebase cloud function endpoint, used to create posts, delete posts, set post captions, send reactions, etc.
mobile.bereal.com - Secondary endpoint - Used to get posts feed, view friends, add friends.

Hijacking authentication tokens

The requests made from the phone are authenticated using a (JSON Web Token) JWT which is sent in the “Authorization” header of each request. this header expires after a few minutes, however until then, I can use this token to do whatever I like as an authenticated user.

BeReal’s most commonly fetched endpoint is mobile.bereal.com/api/feeds/friends which gets the list of friends’ posts on a user’s feed. If I call this endpoint from Postman without the authorization header, I instantly get a 403 - Forbidden status code which is expected, as I have no credentials to say who I am.

On the Mitmproxy feed, I can just copy and paste the “Authorization” JWT included in any of the BeReal API requests and use that for myself. Upon including this header in Postman, I am allowed through the security and I get greeted with a nice JSON of all of my friends’ posts with links to all of their Images, location data, how many retakes they took, etc.

I can use this same approach to set the caption of my BeReal post as many times as I like. Normally, you are only allowed to set it one time and then it is permanent; however, by making a POST request to the /setCaptionPost endpoint I can bypass this rule and set my caption over and over again at my leisure.

Custom RealMoji

To show appreciation in BeReal, instead of sending a “Like”, you send a “RealMoji” which is an image of your face as a reaction. This adds a level of personality to a reaction which is normally missed. The fact that you can retake RealMojis as much as you like makes it a good opportunity to insert custom images as reactions as we are not only limited to one per day, unlike the BeReal post. Let’s start by looking at what is happening here when we send a RealMoji.

A POST request is made to the firebase storage endpoint which initiates a file upload request.

A PUT request is made to firebase, using the upload ID returned from the previous request to upload the image. The actual image data is sent in the body of this request.

A final POST request is sent to a cloud function with details of the reaction to be sent (Image storage location, reaction type, etc). Atotal of three requests are necessary to send a RealMoji reaction.

Manipulating expected content size

Without fully understanding the workings of Firebase file uploads, I started by simply modifying the data of the PUT request, as that is when the image content is sent to the server.

I set a filter in Mitmproxy to pause the request as it comes through and then modified the body of the request to contain the data of my chosen Jpeg

I was then met with a 400 status error, stating that the size of the content did not match what it was expecting. Hmm…

I searched for this number 45243 and found it defined on the prior request. For my second attempt, I also modified this POST request in order to match the content size of the file to be uploaded.

After doing this, I received a 200 status on both requests. Success. My manipulated payload has been uploaded! I then refreshed the app to see my “FakeMoji” in all its glory.

Custom BeReal Post

The flow of uploading a BeReal and sending a RealMoji is mostly identical. After working out how to manipulate the firebase upload, creating a custom post was basically no different.

Automating

Mitmproxy also has a Python API which is great for manipulating HTTP requests automatically. Based on the process above, I wrote a script which automates the process of intercepting the request and replacing the data.



import json
import os
import mitmproxy.http

BASE_PATH = os.path.dirname(os.path.abspath(__file__))
FAKEMOJI = os.path.join(BASE_PATH, 'fakemoji.jpg')

def read_content(file_path):
       with open(file_path, 'rb') as f:
            data = f.read()
            f.close()
            return data   

class Interceptor:
    def __init__(self):
        self.upload_type = None

    # http request trigger
    def request(self, flow: mitmproxy.http.HTTPFlow):

        method  = flow.request.method
        url     = flow.request.url

        # Firebase upload domain
        if ("firebasestorage.googleapis.com" in url):

            # handle upload request (POST)
            if method == "POST":
                # content body
                json_body = json.loads(flow.request.content)

                # record upload type (necessary for following PUT request)
                self.upload_type = json_body["metadata"]["type"]

                # replace content length definition
                flow.request.headers["x-goog-upload-content-length"] = os.stat(FAKEMOJI).st_size

            # handle sending file content (PUT)
            elif method == "PUT":

                # only replace image if realmoji upload
                if (self.upload_type == "realmoji"):

                    # replace file content
                    flow.request.content = read_content(FAKEMOJI)

addons = [
    Interceptor()
]

The script listens out for Firebase requests with a metadata type of “RealMoji” and then intercepts and manipulates them accordingly. The expected content size for the upload is altered and the content of the PUT request is automatically replaced with the data of a local file: fakemoji.jpg.

How to protect yourself from a MITM attack

If you use a company-managed phone which has custom certificates installed, there is a chance that they can see you making these sorts of requests.

In reality, performing this man-in-the-middle attack on someone else’s phone maliciously would be easier said than done. To get it working for me required configuration of the iPhone’s proxy settings as well as approval of certain device certificates which would not be practical for an attacker to do remotely; however, with a compromised device, something like this would be more than possible.

If you use a company-managed phone which has custom certificates installed, there is a chance that they can see you making these sorts of requests. Obviously, this can’t be said for all companies but it can be hard to tell how “big brother” they are and how much of a grasp they have on your data and internet usage.

Use a VPN.

In order to prevent such attacks, you can try to protect your physical device from malicious fingers and for an added layer of security, use a VPN! (Shameless referral link here. Get 30 days free!). Yes, VPNs are not perfect, and 90% of the time they are advertised to the general public incorrectly but for this instance, they are effective at masking your actions from prying network eyes.

When I turn my VPN on and then send a RealMoji again, nothing is detected by Mitmproxy. I would include a screenshot to example but there is literally nothing to see. The requests which were shown before simply do not appear, as if the phone is not doing anything at all.

Closing thoughts

This fun experiment shows how you can manipulate your own device HTTP traffic and see what requests apps are making behind the curtain. It is just another proof of how you can never trust the front end, even from a native app. As a developer, in order to have real security in place, you must install effective security measures on your back end to prevent misuse; otherwise, your production app is not much better than a sandbox environment!

How to deploy an AWS Lambda Stack under a custom domain name

Oscar — Thu, 11 Aug 2022 13:04:00 +0000

Lambda functions are really cool. They are tiny cloud-based compute instances which get created and destroyed on each API call. They automatically scale and can be distributed across the globe and executed close to the user which can deliver very fast response times.
In this guide, you will learn how to deploy a basic hello world function and how to link it to a domain name which you already own.

Prerequisites

Amazon AWS Account
AWS CLI tool
AWS SAM CLI tool
AWS Lambda function deployed to your AWS account
A domain name with configurable DNS (I’m using Cloudflare)

For this tutorial, I will be deploying a simple lambda function to my custom domain: api-helloworld.oscars.dev.

Step 1 - Create lambda function



# initialise boilerplate AWS Lambda project
sam init
...
> 1 - AWS Quick Start Templates
> 1 - Hello World Example
> Use popular package type? (Python and zip) [y/N]: N
> 10 - nodejs16.x
> 1 - Zip
> 2 - Hello World Example TypeScript
> Project name: hello-world



# enter the directory and build the project
cd hello-world

# build project
sam build --beta-features

# deploy project to aws
sam deploy --guided
...
> Stack Name: hello-world
> AWS Region: eu-west-1
[..."yes" for everything else]

Your AWS Lambda function is now deployed to the cloud! You can see your new app under your console.

Clicking on the app will then show you the URL from where the function can be invoked. In my case, I can directly execute my function with the URL below.

Step 2 - Configure Your Domain

So we have a function which we can invoke from an API endpoint. great! But how do we link a domain to that?

Certificate Manager

Head to Certificate Manager in your AWS console and then click on request in the top-right to request a new certificate.

Certificate type > Select “Request public certificate” and click next.

Input the domain name which you want (from a domain which you own), select DNS validation and then press Request.

After proceeding, you should be taken back to the certificates list where after refreshing, you should see your newly requested certificate with a “pending validation”. We’re not done yet!

Click on the certificate to get to the detailed page. In the “Domains” section you should see two columns named CNAME Name and CNAME Value as below. Take a note of these values. you will need them later!

If your table is not displaying values like this, wait a little bit and then refresh the page. These entries normally get populated after a minute or so.

Step 3 - Validate Certificate with DNS

Go into your DNS settings for the domain you would like to configure. In my case I am using Cloudflare as it is free and it makes it really easy for me to manage my domains.

Add a new CNAME record to your DNS and copy and paste the NAME and VALUE data from previously. After you hit confirm, you should then see a DNS entry which looks similar to this:

Wait for a bit

Go and make yourself a cup of tea as this will take a few minutes. It can depend on your DNS provider but it shouldn’t take longer than an hour. When the certificate is validated, you should see a green tick by the entry in Certificate manager.

Step 4 - Link your function

When you’re all validated, go ahead and open up API Gateway from your AWS dashboard.

Along the left bar, go to Custom domain names and then click Create.

In Domain name, put the same domain you got the certificate for earlier. Leave everything else as default and select the corresponding certificate from the ACM Certificate dropdown.

Press Create domain name and then under API Mappings, create a new mapping with your function and the desired stage (Prod).

Step 5 - Find the correct URL

This bit caught me out when I first tried to set up a custom domain. The URL displayed on the function control panel isn’t actually the one which you use to forward the requests to.

Open up a terminal and execute the following command to receive a response object with details about your domain.



aws apigateway get-domain-name --domain-name "<YOUR DOMAIN>"
...
{
    "domainName": "<DOMAIN_NAME>",
    "certificateUploadDate": "<Date>",
    "regionalDomainName": "<API_GATEWAY_ID>.execute-api.eu-west-1.amazonaws.com",
    "regionalHostedZoneId": "...",
    "regionalCertificateArn": "arn:aws:acm:eu-west-1:<ACCOUNT>:certificate/<CERT_ID>",
    "endpointConfiguration": {
        "types": [
            "REGIONAL"
        ]
    },
        "domainNameStatus": "AVAILABLE",
}

If your response looks like this, then it's looking good!
Copy your “regionalDomainName”. You will need this for the final step.

Step 6 - Link DNS Record

Return to your DNS provider once again and another CNAME record (last one this time, I promise) with your subdomain as the name (in my case api-helloworld) and your Target/Value as the regionalDomainName from earlier.

Finishing up

Maybe make yourself another cup of tea while the DNS changes take effect. When the changes have applied, you should be able to execute your function via your domain!

Learn Redux the right way: With Redux-toolkit

Oscar — Mon, 28 Feb 2022 10:11:57 +0000

Introduction

Redux! The word which you've been hearing over and over again. What is it? Why is it needed? Maybe you've glanced at the daunting Redux docs and thought "Nah, I'll learn that some other day". Well, today is that day and I guarantee that it will be easier than expected.

Many existing Redux tutorials are outdated, but this guide will show you the latest, recommended way to implement the framework into your app using redux-toolkit. We will go over it in 5 simple steps. It is recommended that you follow along as we learn how to set up, read and write data to Redux. The rest, you can only learn through further experimenting.

What is Redux?

Redux is a global state management system for your entire web/react app. Imagine a state which is shared by every component which can be read and updated at any level, on any page. No callback functions.

1. Set-up

Lets get started. For this tutorial we be using NextJs and TypeScript. Start by initialising a project.
npx create-next-app@latest --ts

In the root of your project, install the dependencies react-redux and @reduxjs/toolkit.
npm i react-redux @reduxjs/toolkit

If you would rather just start playing around with the tutorial code now, the repository can be found on my github.

2. Create a slice

Slices are the functions which define how a global state is managed. In a slice, we define the initial state and also the reducers which define how the data is manipulated. Create the file src/reducers/FooReducer.tsx containing the code, below.

// fooReducer.tsx

import { createSlice } from '@reduxjs/toolkit';

const initialValue = { name: "Nigel", age: 63 };

export const fooSlice = createSlice({
    name: 'foo',
    initialState: {value: initialValue},
    reducers: {
        changeAll: (state, action) => {
            state.value = action.payload;
        },
        agePlusOne: (state, action) => {
            state.value.age += 1;
        }
    }
})

export const { changeAll, agePlusOne } = fooSlice.actions;
export default fooSlice.reducer;

It looks like there is a lot going on, but it will become clearer. Trust me. Let's focus on what matters here.
We have an initialValue which defines the initial value of an object containing a 'name' and 'age' value.
Under reducers we have two special functions which show how the data can be manipulated. We may add as many of these reducer functions as we need.

The function changeAll takes in an object with new key values e.g. {name: 'Bob', age: 44} and replaces the current key values.

The function getOlder takes no parameters, and increases the age value by 1.

3. Set up Provider

In order for the Redux state to be synchronised across the app, we must nest everything inside a <Provider/> component. Copy the code below into pages/_app.tsx.

// _app.tsx
import type { AppProps } from 'next/app'

import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
import fooReducer from '../src/reducers/FooReducer'

const store = configureStore({
  reducer:  {
    foo: fooReducer,
  }
});

function MyApp({ Component, pageProps }: AppProps) {
  return (
  <Provider store={store}>
    <Component {...pageProps} />
  </Provider>
  )
}

export default MyApp

If you are familiar with NextJs, you will know that _app.tsx is the root component of the application. Any page loaded from /pages is rendered inside <Component {...pageProps} /> which means that all routes will always be within the <Provider/> component, allowing access to the global state(s) defined by store on any page.

4. Reading the global state

Go ahead and copy the following code inside your pages/index.tsx

// index.tsx
import type { NextPage } from 'next'
import { useSelector } from 'react-redux';

const Home: NextPage = () => {
  const foo = useSelector(state => state.foo.value);

  return (
    <main>
      <p>{foo.name}</p>
      <p>{foo.age}</p>
    </main>
  )
}

export default Home

When accessing the dev environment, we are now greeted with the text 'Nigel' and '63'. This is the initial state of the object we defined in FooReducer.tsx!

The useSelector() function this global state from the store we set up in our _app.tsx.

5. Writing to the global state

Edit your index.tsx and add the following code.

// index.tsx
//...
import { useDispatch } from 'react-redux';
import { agePlusOne } from '../src/reducers/FooReducer';

const Home: NextPage = () => {
  //...
  const dispatch = useDispatch();

  return (
    <main>
      {foo.name}
      <button onClick={() => {
        dispatch(agePlusOne(null));
      }}>Plus One</button>
      <br />
      {foo.age}
    </main>
  )
}

useDispatch() is the function which is used to execute the functions outlined in our FooReducer.tsx. Here, we have imported the agePlusOne function which adds 1 to the current age value. When we click the button, the age will increase by 1. The function takes no arguments.

If we want to do the same with the changeAll function, we must import it like we did with the agePlusOne function and call it with an argument of the new state that we want e.g. dispatch(changeAll({name: 'Bob', age: 44})).

Wrapping up

If you want to add more reducers, all you need to do is simply create additional components, for example BarReducer.tsx and then include it in the store constant defined in _app.tsx as below.

const store = configureStore({
  reducer:  {
    foo: fooReducer,
    bar: barReducer
  }
})

After doing this, you can then reference bar, as you did with foo and have multiple global states!