405 (Method Not Allowed) when using server actions #51984
Replies: 3 comments 10 replies
-
|
What Next.js version have you got? I think there was some issue with input fields of type hidden being placed under the form, but it was patched I believe. |
Beta Was this translation helpful? Give feedback.
-
|
Yes, the |
Beta Was this translation helpful? Give feedback.
-
|
Mmm alright, I tried just that and it worked. There must be something else causing the issue.
"use client";
import setCookie from "./actions";
export default function Home() {
return (
<div>
{[{ localename: "hello", id: "0" }].map((item) => {
return (
<form key={item.id} action={setCookie}>
<input type="hidden" name="value" value={item.localename} />
<input type="hidden" name="name" value="locale" />
<button type="submit">{item.localename}</button>
</form>
);
})}
</div>
);
}
"use server";
import { revalidatePath } from "next/cache";
import { cookies } from "next/headers";
const setCookie = async (data: FormData) => {
const name = data.get("name") as string;
const value = data.get("value") as string;
cookies().set({
name,
value,
httpOnly: true,
path: "/",
});
};
export default setCookie;Maybe middleware? redirects? rewrites? conflicting paths? |
Beta Was this translation helpful? Give feedback.
-
|
oh, I'm not using the server component in a page.tsx but in a component used on a layout.tsx file. Is that not allowed? |
Beta Was this translation helpful? Give feedback.
-
|
Ahmm so the client component that uses the server action is inside a layout file? |
Beta Was this translation helpful? Give feedback.
-
|
Yes, I have a Layout.tsx that has a |
Beta Was this translation helpful? Give feedback.
-
|
Ok! So I found out what was the cause of this error. I was using import { type TLayOut } from 'types/appRouter/TLayOut'
import { type ResolvingMetadata, type Metadata } from 'next'
import {
type TRouter,
type TDefaultPageParameters,
} from 'types/appRouter/TRouter'
import { notFound } from 'next/navigation'
import '../../styles/index.scss'
import { getUrls } from '@/data/getUrls/getUrls'
import { getPageTitle } from '@/utils/getPageTitle/getPageTitle'
import { maldenSans } from '@/lib/fonts/fonts'
import Header from '@/components/Header/Header'
import { getNavigation } from '@/data/getNavigation/getNavigation'
import MainMenu from '@/components/MainMenu/MainMenu'
import { getDictionary } from '@/data/getDictionary/getDictionary'
export async function generateMetadata(
{ params }: TRouter,
parent: ResolvingMetadata,
): Promise<Metadata> {
if (!params.slug) {
return {
title: 'Some Title',
}
}
let url = `/${params.locale}`
if (params.slug) url = `${url}/${params.slug.join('/')}`
return {
title: await getPageTitle(url, parent),
}
}
export const revalidate = 60
// eslint-disable-next-line unicorn/prevent-abbreviations
export async function generateStaticParams() {
const urls = await getUrls()
return urls.map((url) => ({
slug: url.split('/').filter(Boolean),
}))
}
const RootLayout = async ({
children,
params,
}: TLayOut<TDefaultPageParameters>) => {
if (!params?.locale) return notFound()
const nav = await getNavigation(params.locale)
const dictionary = await getDictionary()
if (nav instanceof Error) throw nav
return (
<html lang={params ? params.locale : 'en'}>
<body className={maldenSans.className}>
<Header>
<MainMenu nav={nav} location={dictionary.location} />
</Header>
{children}
</body>
</html>
)
}
export default RootLayout |
Beta Was this translation helpful? Give feedback.
-
|
Seems to be an issue: #49408 |
Beta Was this translation helpful? Give feedback.
-
|
This can also happen if you're deploying a monorepo using a multi-zone deployment. If your proxied apps call something like |
Beta Was this translation helpful? Give feedback.
-
Hi all!
Everytime I try to use a server action the console logs an error and my server action does not work. What am I missing here?
Log
setCookie.ts
Usage
Additionaly I get a lot of this in the server logs when trying to use the server action
Beta Was this translation helpful? Give feedback.
All reactions