Next.js Integration
Integrate Static Forms with your Next.js application
Static Forms works seamlessly with Next.js. This guide covers integration with both the App Router (Next.js 13+) and Pages Router, including Server Actions and client-side approaches.
Environment Variables
First, add your API key to your environment variables:
Environment Variables
Use NEXT_PUBLIC_ prefix for client-side variables. For Server Actions, you can use regular environment variables without the prefix.
App Router (Next.js 13+)
With the App Router, you can use Server Actions or client components:
Server Action Approach
Use Server Actions for form handling (recommended):
Client Component Approach
For more control, use a client component:
Pages Router
For the Pages Router, use API routes or client-side submission:
API Route Approach
File Uploads
Handle file uploads with FormData:
Best Practices
Use Server Actions When Possible
Server Actions provide better security and don't expose API keys to the client.
Handle Loading States
Always show loading indicators and disable form fields during submission.
Provide User Feedback
Show success and error messages to keep users informed about submission status.