Next.js Clerk против NextIntl. Конфликт промежуточного программного обеспечения
Вот три примера проектов на github:
- Клерк + Следующий-МЕЖД. Не работает https://github.com/alexmeyercz/clerk-vs-next-intl-both
- Только клерк. Работает отлично. https://github.com/alexmeyercz/clerk-vs-next-intl-clerk-only
- Дальше-только INTL. Работает отлично. https://github.com/alexmeyercz/clerk-vs-next-intl-intl-only
В соответствии с документацией выполнена только первоначальная настройка.
Я попытался настроить middleware.ts в соответствии с документацией (пример: интеграция с 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*'],
}
Что не работает?
Бог знает что еще. Пока не могу пройти мимо следующего:
- Защита не работает (пустая страница, ошибок нет: ссылка на локальный хост для входа )
- Теги клерка не отображаются, например UserButton ничего не генерирует.
- Та же установка только с Clerk и Next-intl работает хорошо
- Никаких редиректов на защищенных страницах. / перенаправляется на /en/, но /protected остается включенным /protected (не /en/protected)
Ответы 3
Вам необходимо связать промежуточные программы так, чтобы они выполнялись одно за другим. попробуйте выполнить следующие шаги:
- Создайте файл middlewares/middlewarechain.ts в корневом каталоге:
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() }
- Теперь добавьте приведенный ниже фрагмент кода в файл middleware.ts:
экспортировать промежуточную цепочку по умолчанию ([authMiddleware, intlMiddleware])
не забудьте импортировать функцию middlewarechain в middleware.ts, и вы сможете упорядочивать функции по своему усмотрению.
Большое спасибо за совет. Кажется, вы правы, и цепочка промежуточного программного обеспечения — это решение, но пока мне не удалось заставить его работать. Проблема во мне. Мне нужно это лучше понять. Я обновлю этот пост, как только пойму во всем этом смысл.
так рад это знать, братан, и, пожалуйста, дай мне знать, если тебе понадобится дополнительная помощь..😀
Я решил проблему с тем, что форма входа не отображается, закомментировав NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in. и NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up в моем .env Никаких изменений в middleware.ts, кроме тех, которые предложены официальной документацией клерка относительно интеграции с next-intl, не потребовалось.
Я мог бы открыть другой вопрос в SO, но я нахожусь в том же положении, что и ОП.
В документации даже есть запись об этом в https://next-intl-docs.vercel.app/docs/routing/middleware#example-integrating-with-clerk
Но с Clerk v5 маршруты /api больше не доступны...
Да, пока я не решил эту проблему. Скоро попробую новую версию Clerk.
Большое спасибо за ваш ответ. В Интернете практически нет никакой информации по этой теме (один пример документации и одно устаревшее видео на YouTube, но ни одно из них не бесполезно). Я вернусь к этому на выходных и протестирую. Я предоставлю вам отзыв, как только протестирую.