Route Handler not working Next auth, Next Intl & Next 14

38 Views Asked by At

I have a problem with the next auth session. For some reason it returns these errors. enter image description here

Also, if I create inside api another folder with route.ts and try to access example, api/hello/route.ts => localhost:3000/api/hello => 404. it doesn't work either.

I think this comes from the configuration with Next Intl but I can't find anything.

folder structure:enter image description here

when I call the 'next-auth/react' import signIn I'm redirected to [locale]/login. And returns 404. enter image description here

middleware.ts:

import createMiddleware from 'next-intl/middleware'
import { locales, localePrefix, pathnames } from './config'
import { withAuth } from 'next-auth/middleware'
import { NextRequest } from 'next/server'

const privateRoutes = ['/create-add', '/profile']

const intlMiddleware = createMiddleware({
    // A list of all locales that are supported
    // Used when no locale matches
    defaultLocale: 'es',
    locales,
    pathnames,
    localePrefix,
    localeDetection: false,
})

const authMiddleware = withAuth(
    function onSuccess(req: any) {
        console.log('onSuccess')
        return intlMiddleware(req)
    }
)

export default function middleware(req: NextRequest) {
    // Define a regex pattern for private URLs
    const excludePattern = `^(/(${locales.join('|')}))?(${privateRoutes.join(
        '|'
    )})$` //Esta comprobando si la ruta es privada
    const publicPathnameRegex = RegExp(excludePattern, 'i')
    const isPublicPage = !publicPathnameRegex.test(req.nextUrl.pathname)

    if (isPublicPage) {
        // Apply Next-Intl middleware for public pages
        return intlMiddleware(req)
    } else {
        // Apply Next-Auth middleware for private pages
        return (authMiddleware as any)(req)
    }
}

export const config = {
    matcher: [
        // Skip paths that should not be internationalized
        '/((?!api|_next/static|_next/image|favicon.ico).*)',
        // Enable a redirect to a matching locale at the root
        '/',
        // Set a cookie to remember the previous locale for
        // all requests that have a locale prefix
        '/(en|ca|fr|pt)/:path*',
        // Enable redirects that add missing locales
        // (e.g. `/pathnames` -> `/en/pathnames`)
        '/((?!_next|_vercel|.*\\..*).*)',
    ],
}

i18n.ts

import {notFound} from "next/navigation";
import {getRequestConfig} from 'next-intl/server';
import { locales } from "./config";
 
export default getRequestConfig(async ({locale}) => {
  // Validate that the incoming `locale` parameter is valid
  if (!locales.includes(locale as any)) notFound();
 
  return {
    messages: (await import(`./messages/${locale}.json`)).default
  };
});

providers.tsx

'use client'

import { NextUIProvider } from '@nextui-org/react'
import { SessionProvider } from 'next-auth/react'
import { useRouter } from 'next/navigation'

export function Providers({
    children,
}: {
    children: React.ReactNode
}) {
    const router = useRouter()
    return (
        <SessionProvider>
                <NextUIProvider navigate={router.push}>{children}</NextUIProvider>
        </SessionProvider>
    )
}

layout.tsx

import type { Metadata } from 'next'
import { Quicksand } from 'next/font/google'
import Navbar from '@/components/navbar/navbar'
import { NextIntlClientProvider } from 'next-intl'

import '@/app/globals.css'
import { Providers } from '@/providers/providers'
import RootContext from '../context/rootContext'
import Message from '@/components/message/message'
import { getMessages } from 'next-intl/server'

const quicksand = Quicksand({
    weight: ['300', '400', '500', '600', '700'],
    subsets: ['latin'],
    variable: '--font-quicksand',
})

export const metadata: Metadata = {
    title: 'Create Next App',
    description: 'Generated by create next app',
}

export default async function RootLayout({
    children,
    params: { locale },
}: {
    children: React.ReactNode
    params: { locale: string }
}) {
    const messages = await getMessages()
    return (
        <html lang={locale}>
            <body className={`${quicksand.variable}` + ' ' + 'omd'}>
                <RootContext>
                    <NextIntlClientProvider messages={messages}>
                        <Providers>
                            <Message />
                            <Navbar locale={locale} />
                            {children}
                        </Providers>
                    </NextIntlClientProvider>
                </RootContext>
            </body>
        </html>
    )
}

I've tried to update the regex matcher at middleware but not working. I've tried to create other route handlers as a test and returns 404 too.

0

There are 0 best solutions below