Question 1

Next.jsにおけるServer Actionとは何ですか？

Accepted Answer

Server Actionは、サーバーでのみ実行される非同期関数で、ClientまたはServerコンポーネントから直接呼び出すことができます。明示的なAPI routeを作成せずにデータのミューテーション（POST、PUT、DELETE）を処理できます。Server ActionsはAPI route + クライアント側fetchコールの重複を避けることでコードを簡素化します。

Question 2

別ファイルでServer Actionを宣言するにはどうすればよいですか？

Accepted Answer

別ファイルにServer Actionを作成するには、ファイルの先頭に'use server'ディレクティブを追加し、async関数をエクスポートします。このアプローチは再利用性と関心の分離のために推奨されます。関数はその後、任意のClientまたはServerコンポーネントにインポートできます。

Question 3

Server ActionとAPI routeの違いは何ですか？

Accepted Answer

Server Actionsはコンポーネントから直接呼び出せるため、明示的なRESTエンドポイントを作成する必要がありませんが、API routesはHTTP呼び出し（fetch）が必要です。Server Actionsはroute + クライアント呼び出しの重複を避けることでコードを簡素化します。シンプルなミューテーションには最適ですが、パブリックエンドポイントやWebhookにはAPI routesが引き続き有用です。

Next.js Server Actions

Next.jsにおけるServer Actionとは何ですか？

回答

別ファイルでServer Actionを宣言するにはどうすればよいですか？

回答

Server ActionとAPI routeの違いは何ですか？

回答

HTMLフォームでServer Actionを使用するにはどうすればよいですか？

Server Actionはフォームからどのような種類のデータを受け取りますか？

その他のReact / Next.js面接トピック

JavaScript の基礎

React の基礎

React Hooks

コンポーネントのライフサイクル

React Router

Contextを使った状態管理

フォームと Controlled Components

データ取得と API

React Query (TanStack Query)

Styling & CSS-in-JS

Next.jsの基礎

TypeScriptとReact

Next.js データフェッチング

Next.jsのルーティングとナビゲーション

Next.js API Routes

Next.js Metadata & SEO

Next.js の Middleware と Auth

React テスト

Zustand State Management

React パフォーマンス最適化

Error Boundaries & エラーハンドリング

Advanced React Patterns

Next.jsの高度な機能

Next.jsのデプロイメントと本番環境

アーキテクチャ & デザインパターン

React Server Components

Next.js の国際化

React セキュリティ & ベストプラクティス

次の面接に向けてReact / Next.jsをマスター