Next.js Server Action을 사용해보고 싶은데 어떻게 하면 되나요?

안녕하세요! 코드가 없어서 정확한 원인은 모르겠지만 혹시 next.config.js에서 설정을 해주셨나요? server action은 지금 experimental 기능이어서 next.config.js 에서 설정을 따로 해주셔야합니다. 참고해보세요 :) - https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions#convention

1
2
3
4
5
const nextConfig = {
  experimental: {
    serverActions: true,
  }
}

Next.js 14.3.0 버전부터 도입된 Server Action은 Next.js에서 서버에서 실행되는 함수를 작성할 수 있게 해주는 기능입니다. Server Action을 사용하려면 몇 가지 단계를 따라야 합니다. 1. Next.js 버전 확인: 먼저, Next.js 버전이 14.3.0 이상인지 확인해야 합니다. 이전 버전의 Next.js에서는 Server Action을 사용할 수 없습니다. 필요한 경우 Next.js를 업그레이드해야 합니다. 2. API Route 생성: Server Action을 사용하기 위해 API Route를 생성해야 합니다. pages/api 디렉토리에 새 파일을 생성하고, 해당 파일 내에서 Server Action을 작성합니다. 이 파일은 서버에서 실행되는 로직을 정의하는 역할을 합니다. 3. Server Action 작성: API Route 파일에서 Server Action 함수를 작성합니다. 이 함수는 클라이언트 요청에 응답하는 서버 코드를 포함해야 합니다. 일반적으로 비동기 작업이나 데이터베이스 연산 등을 처리하는 용도로 사용됩니다. Server Action 함수 안에서 필요한 로직을 작성하고 결과를 반환합니다. 4. API Route 등록: 작성한 API Route를 Next.js 애플리케이션에 등록해야 합니다. pages/api 디렉토리 내의 파일은 Next.js에 의해 자동으로 API 엔드포인트로 처리되므로, 별도의 설정이 필요하지 않습니다. 위 단계를 따라 Server Action을 작성하고 실행하면 됩니다. Server Action은 서버에서 실행되므로 클라이언트 요청에 따라 실행 결과를 반환할 수 있습니다. API Route를 통해 클라이언트에서 해당 Server Action을 호출하면 결과를 받을 수 있습니다. 참고로, Server Action은 API Route 내에서 사용됩니다. 일반적인 컴포넌트에서는 사용할 수 없으며, 서버 사이드에서 실행되는 로직을 처리하기 위한 용도로 사용됩니다.