The Power of Server Actions in Next.js: A Comprehensive Guide
......
Loading...
Similar articles
Never miss an update
Subscribe to receive news and special offers.
By subscribing you agree to our Privacy Policy.
Never miss an update
Subscribe to receive news and special offers.
By subscribing you agree to our Privacy Policy.
Developing a project involving Next.js' action server poses a substantial challenge. The process requires significant time investment due to the need to handle both the backend and frontend aspects of the application concurrently.
Next.js has introduced Server Actions in version 13.4, a ground-breaking feature that's transforming web development. By enabling server-side data manipulation and minimizing client-side JavaScript, Server Actions enhance both performance and security. This innovation has made Next.js a standout player in the ever-changing world of web development.
Next.js' Server Actions enable you to create server-side functions that you can call from the client-side. This allows you to interact with your backend securely and efficiently. Server Actions can retrieve data, transform it, and return responses all within the Next.js environment, streamlining backend interactions.
To get started, you'll need a Next.js project. If you haven't already set one up, you can create a new project with the following command:
npx create-next-app@latest my-nextjs-app
cd my-nextjs-appNext, let's create a server action. Server Actions are functions that run on the server but are invoked from the client. These functions are written in app directory files and are defined using the async keyword.
// app/server/login
'use server';
import { someDatabaseFunction } from 'database'; //Your database
export async function loginForm(data) {
// Perform server-side logic here, like database operations
const result = await someDatabaseFunction(data);
if(!result) throw new Error('Invalid credentials');
return result;
}Now that you have a server action ready, let's create a form in your component that will send data to this server action.
'use client';
import { useRouter } from 'next/navigation';
import { Button } from '@/components/ui/button';
export default function ContactForm() {
const router = useRouter();
const handleSubmit = async (event) => {
event.preventDefault();
const formData = new FormData(event.target);
const result = await submitForm({
name: formData.get('name'),
email: formData.get('email'),
message: formData.get('message')
});
if (result.success) {
router.push('/thank-you');
} else {
console.error('Submission failed');
}
};
return (
<form onSubmit={handleSubmit}>
<input type='text' name='name' placeholder='Your Name' required />
<input type='email' name='email' placeholder='Your Email' required />
<textarea name='message' placeholder='Your Message' required></textarea>
<Button type='submit'>Submit</Button>
</form>
);
}Upon completion of data processing by the server action, it sends a response. In the given example, we evaluate the response to determine if the submission was successful. If it was, we redirect the user to a thank-you page.
Make your Next.js forms look great with Shadcn components. it provides a library of ready-to-use UI elements that can be effortlessly integrated into your forms, offering an aesthetically pleasing and professional user experience.
In this example, we use zod for schema validation, react-hook-form for handling form state, and Shadcn UI components for the form interface. This setup provides a robust, type-safe form handling mechanism in Next.js.
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"
import { Button } from "@/components/ui/button"
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { loginForm } from "@/app/server/login"
const FormSchema = z.object({
email: z.string().email({ message: "Please enter a valid email" }),
name: z.string().min(1, { message: "Please enter your name" }),
})
export function InputForm() {
const form = useForm<z.infer<typeof FormSchema>>({
resolver: zodResolver(FormSchema),
defaultValues: {
email: "",
name: ""
},
})
async function onSubmit(data: z.infer<typeof FormSchema>) {
try {
console.log(data)
const result = await loginForm(data)
if(result){
toast.success("Login success")
}else {
toast.error("Invalid credentials, please verify your email.")
}
} catch (error) {
if (error instanceof Error) {
toast.error(error.message)
}
}
}
return (
<Card>
<CardHeader>
<CardTitle>Input Form</CardTitle>
</CardHeader>
<CardContent>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input type="email" placeholder="shadcn" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Your name</FormLabel>
<FormControl>
<Input type="name" placeholder="shadcn" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit">Submit</Button>
</form>
</Form>
</CardContent>
</Card>
)
}Form more info for the Building forms with React Hook Form and Zod, follow the page Shadcn UI form with more example.
Next.js Server Actions allow developers to seamlessly execute server-side tasks directly from the front end. This simplifies the development process and enables the creation of sophisticated and interactive web applications that combine exceptional design and functionality. They work seamlessly with Shadow Components and other components to elevate the user experience.
This guide has equipped you with the knowledge to use Server Actions in Next.js. Explore further and explore the potential of Next.js. Their capabilities will enhance your web development skills and unlock countless opportunities.