NextJS.sync-conflict-20240916-220905-NZSOT3W

NextAuth

For notes on using nextauth library with Next.JS see NextAuth.

NextJS 13 API Routes

Create a route.tsx file inside your apps directory at the subdirectory you want to address

You must export a function for each HTTP method you want to serve e.g. GET, POST and so on.

import { NextRequest, NextResponse } from 'next/server';
 
type ResponseData = {
  message: string
}
 
export async function GET(req: NextRequest) {
  //res.status(200).json({ message: 'Hello from Next.js!' })
  return new NextResponse(JSON.stringify({ message: "hello world" }), { status: 200 });
}

Dynamic Routes

We can use square brackets in the folder segment name to indicate a path param that will be filled e.g. [slug] as per the documentation

These params are then passed to the method as per the api routes documentation:

export async function GET(
  request: Request,
  { params }: { params: { slug: string } }
) {
  const slug = params.slug // 'a', 'b', or 'c'
}

WebPack

In some cases we might want to specifically skip backend packages when the frontend package is being built. We can use nextjs config with the webpack ignore plugin to skip certain things.

The following snippet is based-on an updated version of this answer

/** @type {import('next').NextConfig} */
const nextConfig = {
    webpack: (config, {isServer, webpack}) => {
        // Ignore bee-queue
        if(!isServer){
            config.plugins.push(new webpack.IgnorePlugin({ resourceRegExp: /^(bee-queue)$/ }));
            config.plugins.push(
                new webpack.IgnorePlugin({
                  checkResource(resource, context) {
                    // If I am including something from my backend directory,
                    // I am sure that this shouldn't be included in my frontend bundle
                    if (resource.includes('/backend/') && !context.includes('node_modules')) {
                      return true;
                    }
                    return false;
                  },
                }),
              );
        }
 
        return config;
    }
};
 
export default nextConfig;
 

Prisma