CODEWITHSUNDEEP
next.jsmiddlewareapp-routerclerknext-intl
Alexandr Meyer
Alexandr Meyer

Reputation: 55

Next.js Clerk vs. NextIntl. Middleware clash

Here are three sample projects on github:

  1. Clerk + Next-INTL. Not working https://github.com/alexmeyercz/clerk-vs-next-intl-both
  2. Clerk only. Works fine. https://github.com/alexmeyercz/clerk-vs-next-intl-clerk-only
  3. Next-INTL only. Works fine. https://github.com/alexmeyercz/clerk-vs-next-intl-intl-only

There is just initial setup done according to documentation.

I have tried to setup middleware.ts according to documentation (Example: Integrating with Clerk ): https://next-intl-docs.vercel.app/docs/routing/middleware#example-integrating-with-clerk

import { authMiddleware } from '@clerk/nextjs'
import createMiddleware from 'next-intl/middleware'

const intlMiddleware = createMiddleware({
  locales: ['en', 'de'],
  defaultLocale: 'en',
})

export default authMiddleware({
  beforeAuth(request) {
    return intlMiddleware(request)
  },

  // Ensure that locale-specific sign in pages are public
  publicRoutes: ['/:locale', '/:locale/sign-in'],
})

export const config = {
  // Match only internationalized pathnames
  matcher: ['/', '/(de|en)/:path*'],
}

What is not working?

God knows what else. So far I cannot pass through the following:

Upvotes: 0

Views: 845

Answers (3)

etrigo
etrigo

Reputation: 21

I could open a different question in SO, but I'm in the same position as OP.

There is even an entry in the documentation taking over this in https://next-intl-docs.vercel.app/docs/routing/middleware#example-integrating-with-clerk

But with Clerk v5, it makes the /api routes not accessible anymore...

Upvotes: 0

Fakhrul Islam Fuad
Fakhrul Islam Fuad

Reputation: 921

You need to chain the middlewares so that they execute one after another. try the below steps:

  1. Create a file called middlewares/middlewarechain.ts in the root directory:
import { NextResponse } from 'next/server'
import type { NextMiddleware } from 'next/server'

type TMiddleware = (middleware: NextMiddleware) => NextMiddleware

export function middlewarechain(
  functions: TMiddleware[],
  index = 0
): NextMiddleware {
  const current = functions[index]

  if (current) {
    const next = chain(functions, index + 1)
    return current(next)
  }

  return () => NextResponse.next()
}
  1. Now, add this below code snippet into your middleware.ts file:

export default middlewarechain([authMiddleware, intlMiddleware])

don't forget to import the middlewarechain function into middleware.ts and you can order the functions as your needs.

Upvotes: 2

Valentyn Kasyan
Valentyn Kasyan

Reputation: 11

I solved the problem for sign-in form not showing by commenting out NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in and NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up in my .env No changes in the middleware.ts apart from those suggested by the official clerk documentation regarding integration with next-intl were necessary.

Upvotes: 1

Related Questions