DEV Community: Osmar Faria

Next.js middleware to assist with routing

Osmar Faria — Thu, 26 Oct 2023 16:43:04 +0000

When it comes to protecting routes and controlling access in Next.js, various methods exist. However, Next.js middleware provides a straightforward way to achieve this. Let's explore an example based on the Next.js documentation.

To get started, create a middleware.js (or .ts) file at the root of your project, at the same level as your app and pages directories (or inside src if applicable).

import { NextResponse } from "next/server";

// This function can be marked `async` if using `await` inside
export default function middleware(request) {
  return NextResponse.redirect(new URL("/", request.url));
}

export const config = {
  matcher: "/dashboard",
};

In this example, if a user attempts to access the /dashboard page, they will be redirected to the home / page. The matcher allows you to filter specific paths, and it can handle single or multiple paths. You can even use regular expressions for more complex matches.

export const config = {
  matcher: ['/about/:path*', '/dashboard/:path*'],
}

export const config = {
  matcher: [
   '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
}

Now, let's consider situations where you need different rules for specific scenarios, such as when a user is already logged in and tries to access the login page, or when a user is logged in but lacks the credentials to access the dashboard page.

For such cases, you can leverage middleware to customize your access control. Here's an example using the next-auth library for authentication, where we check the user's login status using the getToken function.


// middleware.ts
import { getToken } from 'next-auth/jwt'
import { NextRequest, NextResponse } from 'next/server'

export async function middleware(req: NextRequest) {
  const homeUrl = new URL('/', req.url)
  const pathname = req.nextUrl.pathname
  const loginPathname = /login/i

  const isLoginPathname = loginPathname.test(pathname)
  const token = await getToken({ req })

  if (isLoginPathname) {
    if (token)
      return NextResponse.redirect(homeUrl)
    }
  }

  return NextResponse.next()
}

In this example, if a logged-in user tries to access the login page, they will be redirected to the home page.

Next, let's consider a scenario where you want only administrators to access the dashboard page. To simplify this example, we'll check an isAdmin property in the user's token obtained from next-auth.

// middleware.ts
import { getToken } from 'next-auth/jwt'
import { NextRequest, NextResponse } from 'next/server'

export async function middleware(req: NextRequest) {

  const pathname = req.nextUrl.pathname
  const adminPathname = /dashboard/i
  const homeUrl = new URL('/', req.url)


  const isAdminProtected = 
  adminPathname.test(pathname)

  const token = await getToken({ req })

  if (isAdminProtected) {
    if (!token || !token.isAdmin) {
      return NextResponse.redirect(homeUrl)
    }
  }

  return NextResponse.next()
}

In this case, only users with the isAdmin property set in their token will be able to access the dashboard page. Otherwise it will be redirected to the homepage /.

By using Next.js middleware, you can easily customize route protection and access control in your web applications.

2 ways to build forms using formik with Material UI + Yup!

Osmar Faria — Wed, 25 Oct 2023 21:53:50 +0000

So, you've diving into the world of React, and, like me, you've found yourself using Formik to simplify form management while also making use of Material UI for attractive user interfaces. In this post, we'll explore two methods to combine these tools, resulting in functional and visually appealing forms.

First things first, make sure you have the libraries required installed:

npm install @mui/material @emotion/react @emotion/styled

 npm install formik

 npm install yup

Let's start with a basic example, laying the foundation for Formik's operation, including initial values, a validation schema, and an onSubmit function. We'll utilize Yup to create a straightforward validation schema.

import * as yup from 'yup'

  const initialValues = {
    name: '',
    surname: '',
    phone: '',
    age: '',
  }

  const validationSchema = yup.object({
    name: yup.string().required().max(25).min(2),
    surname: yup.string().required().max(25).min(2),
    phone: yup.string().required(),
    age: yup.number()
  })

  const onSubmit = (data) => {
    console.log(data)
  }

Now, let's dive into the first way to integrate Formik with Material UI. We'll access the Formik component within a function to combine it with Material UI:

import { Form, Formik } from "formik";

import { Button, Card, TextField } from "@mui/material";

...

<Card>
  <Formik
    initialValues={initialValues}
    validationSchema={validationSchema}
    onSubmit={onSubmit}
  >
    {(formik) => (
      <Form>
        <TextField
          label="Name"
          name="name"
          {...formik.getFieldProps("name")}
        />
    ...
        <Button
         variant="contained"
         type="submit"
         color="success"
        >
         Submit
        </Button>
      </Form>    
    )}
  </Formik>
</Card>
...

Using {...formik.getFieldProps("name")} simplifies form state management, automatically handling values, onBlur, and onChange events, along with error handling, for the 'name' field.

Next, let's ensure our validation messages appear in Material UI, but only after the user has interacted with the field.

To achieve this, we can use Formik in conjunction with the Material UI TextField's error and helperText properties:


...

<TextField
  label="Name"
  name="name"
  {...formik.getFieldProps("name")}    
  error={formik.touched.name && !!formik.errors.name}
  helperText={formik.touched.name && formik.errors.name}
/>
...

Now, if you require more control over the TextField component, there's another approach to integrate it. You can wrap the TextField with the <Field> component from Formik. This grants you extra resources, such as custom validation functions and access to meta data:

...

// While Formik can handle this validation as well, let's explore a custom approach for the sake of this example :)

const customValidation = (value) => {
  const regex = /^[A-Za-z\s]+$/; // Regular expression to match alphabets and spaces

  if (!value || !regex.test(value)) {
    return 'Name should contain only letters and spaces';
  }
  return undefined; // Validation passed
};

...

<Field name="name" validate={customValidation}>
  {({ field, meta }) => (
    <TextField
      {...field}
      label="Name"
      error={meta.touched && !!meta.error}
      helperText={meta.touched && meta.error}
    />
  )}
</Field>

That's it for this post. I hope it has helped clarify how to move forward if you are trying to implement these tools together! 😄