Zod и NextJS — исчерпывающее руководство

Узнайте, как быстро настроить приложение Next.js с помощью TypeScript и библиотеки Zod, и с легкостью начать создавать готовые к работе веб-приложения.

Для веб-разработчика работа над сложными проектами может оказаться непростой задачей. Особенно, когда дело доходит до создания нового проекта, выбора правильных инструментов и их настройки, может потребоваться много времени и усилий. Одним из наиболее важных аспектов любого современного веб-приложения является проверка данных. И вот здесь на сцену выходят библиотеки TypeScript и Zod. В этой статье мы обсудим, как настроить приложение Next.js с библиотекой TypeScript и Zod.

Что такое Next.js?

Next.js — это платформа серверного рендеринга (SSR) на основе React, которая предоставляет комплексное решение для создания готовых к работе веб-приложений. Он поставляется со встроенной поддержкой рендеринга на стороне сервера, создания статических сайтов, динамического импорта и других современных функций веб-разработки.

Зачем использовать TypeScript с Next.js?

TypeScript — это надмножество типов JavaScript, обеспечивающее проверку типов во время компиляции, улучшенную поддержку IDE и улучшенное качество кода. Next.js поддерживает TypeScript по умолчанию и упрощает создание масштабируемых и удобных в сопровождении приложений.

Что такое библиотека Зода?

Zod — это библиотека проверки схем, основанная на TypeScript, которая предоставляет простой и интуитивно понятный API для определения и проверки схем данных. Он поддерживает проверку во время выполнения, вывод типов и отчеты об ошибках, что упрощает работу со сложными структурами данных.

Настройка приложения Next.js с помощью TypeScript и Zod:

Чтобы настроить приложение Next.js с TypeScript и Zod, нам нужно выполнить следующие шаги:

Создайте новое приложение Next.js с помощью TypeScript:

Чтобы создать новое приложение Next.js с TypeScript, мы можем использовать следующую команду:

npx create-next-app --typescript my-app

Это создаст новое приложение Next.js с поддержкой TypeScript.

2. Установите библиотеку Zod:

Чтобы установить библиотеку Zod, мы можем использовать следующую команду:

npm install zod

Это установит библиотеку Zod как зависимость в нашем проекте.

3. Определите схему данных с помощью Zod:

Чтобы определить схему данных с помощью Zod, мы можем создать новый файл с именем schema.ts в корне нашего проекта и определить нашу схему, используя следующий код:

import * as z from "zod";

export const UserSchema = z.object({
  name: z.string().min(3),
  email: z.string().email(),
  age: z.number().int().positive(),
});

В этом примере мы определили простую схему пользователя с полями имени, электронной почты и возраста.

💡 Примечание. Теперь вы можете поделиться этой функцией проверки Zod с платформой с открытым исходным кодом, такой как Bit, если вы хотите повторно использовать ее в проектах с помощью простой установки npm.

Узнайте больше об этом здесь:

Извлечение и повторное использование уже существующих компонентов с помощью добавления битов
Наша цель в этом руководстве — научиться освобождать компоненты из монолитной тюрьмы. Мы будем использовать Bit для отслеживания…bit.dev

4. Создайте новый маршрут API:

Чтобы создать новый маршрут API, мы можем создать новый файл с именем users.ts в каталоге pages/api и определить наш маршрут API, используя следующий код:

import { NextApiRequest, NextApiResponse } from "next";
import { UserSchema } from "../../schema";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  try {
    const user = UserSchema.parse(req.body);
    res.status(200).json({ message: "User created successfully", user });
  } catch (error) {
    res.status(400).json({ message: "Validation error", error });
  }
}

В этом примере мы определили маршрут API, который принимает запрос POST с объектом пользователя в теле запроса. Мы проверяем пользовательский объект, используя наш UserSchema, и возвращаем сообщение об успешном завершении с проверенным пользовательским объектом, если проверка прошла успешно. В противном случае мы возвращаем сообщение об ошибке проверки с подробными сведениями об ошибке.

5. Протестируйте маршрут API:

Чтобы протестировать маршрут API, мы можем использовать любой клиент REST, например Postman или Insomnia. Мы можем отправить запрос POST на маршрут API users с объектом пользователя в теле запроса. Если проверка прошла успешно, мы получим сообщение об успехе с проверенным объектом пользователя. В противном случае мы получим сообщение об ошибке проверки с подробностями ошибки.

Заключение:

В этой статье мы обсудили, как настроить приложение Next.js с библиотекой TypeScript и Zod. Мы увидели, как легко определить схему данных с помощью Zod и использовать ее для проверки запросов API. Это делает наш код более удобным в сопровождении, масштабируемым и менее подверженным ошибкам. Используя TypeScript с Next.js, мы можем использовать его возможности проверки типов, чтобы обнаруживать ошибки на ранних этапах цикла разработки и улучшать общее качество кода.

Библиотека Zod предоставляет простой и интуитивно понятный API для определения и проверки схем данных, что упрощает работу со сложными структурами данных. Следуя шагам, описанным в этой статье, мы можем быстро настроить приложение Next.js с TypeScript и библиотекой Zod и с легкостью начать создавать готовые к работе веб-приложения.

Просмотреть все мои подсказки о производительности здесь:

Профиль briandolcevida на PromptBase | PromptBase
Изменить описаниеpromptbase.com

Создавайте приложения с повторно используемыми компонентами, как Lego

Инструмент с открытым исходным кодом Bit помогает более чем 250 000 разработчиков создавать приложения с компонентами.

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

→ Подробнее

Разделите приложения на компоненты, чтобы упростить разработку приложений, и наслаждайтесь наилучшими возможностями для рабочих процессов, которые вы хотите: