NextJS Notes

Introduction

This page is meant to capture parts of NextJS not covered by React

External Images

When using external images on a page you next to specify the allowed domains in nextjs.config.js

const nextConfig = {
    images: {
      remotePatterns: [
        {
          protocol: "https",
          hostname: "images.unsplash.com",
        },
      ],
    },
    experimental: {
      serverActions: true,
    },
  };

Middleware

Protecting routes can be achieved using a file called middleware.ts at the same level as project/src/

export {default} from "next-auth/middleware";

// NextAuth config
export const config = {
  // Add protected routes here
  matcher: [
    "/",
    "/admin/:path*",
    "/course/:path*",
  ]