Высвобождение Next.js 13: революция обработки на стороне сервера с помощью действий сервера

В Next.js 13 появилась новая мощная функция, известная как действия сервера, разработанная командой Vercel. Эта передовая возможность позволяет разработчикам выполнять серверные функции, которые могут быть легко вызваны из клиента, отражая простоту обычных функций. Обеспечивая выполнение кода на сервере без необходимости в сложных конечных точках API, действия сервера обещают революционизировать обработку на стороне сервера в Next.js.

Настройка действий сервера:

На момент публикации этой статьи функция «Действия сервера» все еще находилась в стадии альфа-тестирования. Чтобы использовать его, нам сначала нужно настроить наш проект Next.js. Добавив следующий фрагмент кода в файл next.config.js, мы активируем экспериментальный режим действий сервера:

/** @type {import('next').NextConfig} */
const nextConfig = {
    experimental: {
        serverActions: true,
    },
};

module.exports = nextConfig;

После настройки этой конфигурации мы можем приступить к написанию кода. В конце этого урока у вас должна быть структура папок, как показано ниже.

Как только проект настроен, мы можем углубиться в создание нашего первого действия сервера. Для начала настроим конфигурацию базы данных и добавим файл db.ts в папку lib:

import { PrismaClient } from "@/prisma/src/generated/prisma";

const db = new PrismaClient();

export default db;

export * from "@/prisma/src/generated/prisma";

Имея базу данных, теперь мы можем создать createUser действие сервера:

import db, { User } from "@/lib/db";

export async function createUser(formData: FormData) {
    "use server";

    try {
        const user: Omit<User, "id"> = {
            firstName: formData.get("firstName")?.toString() || "",
            lastName: formData.get("lastName")?.toString() || "",
            username: formData.get("username")?.toString() || "",
        };

        const createdUser: User = await db.user.create({
            data: user,
        });

        return { user: createdUser };
    } catch (error) {…