Replies: 7 comments 3 replies
-
Were you able to solve this? |
Beta Was this translation helpful? Give feedback.
-
Hi I think we should address this. Seeing that they are probably very soon becoming beta feature and soon enough stable, is there any plan to make it work, or do we now if it's a bug / something we can look for in the i18n middleware? |
Beta Was this translation helpful? Give feedback.
-
They have an issue opened at Nex.js: vercel/next.js#54992 |
Beta Was this translation helpful? Give feedback.
-
Guys the vercel team fixed the issue: vercel/next.js#49408 (comment) They are adding this to Next.js 13.5 next week!! |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
I was having the same 405 error message in the Developer Tools Console, and managed to follow @AndrewRPorter's advice in the next.js Issue of splitting the layout into two files, one at // app/layout.tsx
/**
* The Layout in this file deals with setting the locale and translations for
* the page. A nested layout then deals with the rest of the app layout.
*/
import * as React from 'react';
import { getTranslations } from 'next-intl/server';
import { unstable_setRequestLocale } from 'next-intl/server';
import { locales } from '@/i18n';
export async function generateMetadata({params: {locale}}: { params: {locale: string}} ) {
const t = await getTranslations({locale, namespace: 'Metadata'});
return {
title: t('title'),
description: t('description')
};
}
export function generateStaticParams() {
return locales.map((locale) => ({locale}));
}
export default async function Layout({ children, params: {locale}} : { children: React.ReactNode, params: {locale: string} }) {
unstable_setRequestLocale(locale);
return (
<html lang={locale}>
<body>
{children}
</body>
</html>
);
} // app/[locale]/layout.tsx
import * as React from 'react';
import LoadingIcon from '@/app/loading';
import Header from '@/components/Header';
import Footer from '@/components/Footer'
export default async function LocaleLayout({ children } : { children: React.ReactNode }) {
return (
<Header />
<main>
<React.Suspense fallback={<LoadingIcon />} >
{children}
</React.Suspense>
</main>
<Footer />
);
} I also seem to have some issues with the default This is I think unrelated to the above issues, but either way, instead I have had to use the configuration below. // middleware.ts
import createMiddleware from 'next-intl/middleware';
export default createMiddleware({
// A list of all locales that are supported
locales: ['en', 'fr', 'de'],
// Used when no locale matches
defaultLocale: 'en',
// Don't add a locale prefix
localePrefix: 'as-needed'
});
export const config = {
matcher: [
'/((?!api|_next|_vercel|__session|.*\\..*).*)',
// Using only the below paths seems to match every path...
// '/',
// '/(en|fr|de)/:path*'
]
}; Hopefully that's a nice minimal example that might help someone else. FWIW, I'm using |
Beta Was this translation helpful? Give feedback.
-
Well, the issue seems to not be fixed! I am facing this problem when I call a server action from any localized subpath, for example, It's working in the local development, but for any preview/prod it throws a |
Beta Was this translation helpful? Give feedback.
-
I am using Next.js server actions for updating my database. But using next-intl middleware it throws below error in console:
POST http://localhost:3000/account 405 (Method Not Allowed) server-action-reducer.js:23
Thank you in advance for any help!
Beta Was this translation helpful? Give feedback.
All reactions