How can I use export in Next's output configuartion?

Question

I'm using Clerk for authentication in my Next.js project, which has both static and dynamic routes.

However, I'm encountering an issue because my Clerk middleware file (middleware.ts) does not allow me to use the export statement for output configurations required in my Next.js config (next.config.mjs). Specifically, when I include output: export in next.config.mjs, I get the following error:

Middleware cannot be used with "output: export". See more info here:

https://nextjs.org/docs/advanced-features/static-html-export

Folder Structure:

src
├── app
│   ├── dashboard
│   │   ├── Folder1
│   │   │   └── page.tsx
│   │   ├── Folder2
│   │   │   └── page.tsx
│   │   ├── page.tsx
│   │   └── layout.tsx
│   ├── sign-in
│   │   └── \[\[...sign-in\]\]
│   │       └── page.tsx
│   ├── sign-up
│   │   └── \[\[...sign-up\]\]
│   │       └── page.tsx
│   ├── page.tsx
│   └── layout.tsx
├── middleware.ts
└── .env

Middleware.ts File:

import { clerkMiddleware } from '@clerk/nextjs/server';

export default clerkMiddleware();

export const config = {
matcher: \[
// Skip Next.js internals and all static files, unless found in search params
'/((?!\_next|\[^?\]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
// Always run for API routes
'/(api|trpc)(.\*)',
\],
};

next.config.mjs File:

/\*\* @type {import('next').NextConfig} \*/
const nextConfig = {
images: {
domains: \['gravatar.com', 'lh3.googleusercontent.com'\],
},
output: "export",
serverRuntimeConfig: {
port: 9125,
},
};

export default nextConfig;

Issue:

I made changes to both the middleware and the next.config.mjs file, but nothing seems to be working. I'm still facing issues with the middleware and the Next.js config file.

What should I do to resolve this conflict?

Answer 1

You can't use middleware in static export as middleware requires a server