Next.js ???????? ??? ?? ??? ???? ???? ????? ??? ??? ???? ?? ?????? ??? ? ????. ??? ? ?? ?? 5? ?????? ??? ????.

Next.js? ?? ?? 4? ??? ?? ?????

• ?????

  • ??: Yup? Formik? ?? ?? ?? ?????? ? ???? ??? ??? ?? ????????. ??? ??? ?? ??? ? ??? React ??????? ???? ??? ? ????.
  • ?? ?:

  import * as Yup from 'yup';
  
  const validationSchema = Yup.object().shape({
    email: Yup.string()
      .email('Invalid email format')
      .required('Email is required'),
  });
  

• Validator.js

  • ??: ??? ??? ??? ??? ??? ??? ???? ???? ???? ??? ???? ?? ????????. ??? ??? ??? ???? isEmail() ???? ???? ????.
  • ?? ?:

  const validator = require('validator');
  
  if (validator.isEmail(emailInput)) {
    console.log('Valid email!');
  } else {
    console.log('Invalid email!');
  }
  

• ??? ??? ???

  • ??: ? ?????? ?? ??? ?? ??? ???? ???? ? ??? ???. ??? ???? ?? ??? ?????.
  • ?? ?:

  const EmailValidator = require('email-validator');
  
  const isValid = EmailValidator.validate('test@example.com'); // true
  

• React Hook ?(with Yup)

  • ??: React Hook Form? React ???????? ??? ???? ? ?? ???? ? ?? ????????. ??? ?? ??? ?? Yup? ? ????? ??? ??? ??? ?????.
  • ?? ?:

  import { useForm } from 'react-hook-form';
  import * as Yup from 'yup';
  import { yupResolver } from '@hookform/resolvers/yup';
  
  const schema = Yup.object().shape({
    email: Yup.string().email().required(),
  });
  
  const { register, handleSubmit, errors } = useForm({
    resolver: yupResolver(schema),
  });
  
  const onSubmit = data => {
    console.log(data);
  };
  
  <form onSubmit={handleSubmit(onSubmit)}>
    <input name="email" ref={register} />
    {errors.email && <p>{errors.email.message}</p>}
    <button type="submit">Submit</button>
  </form>
  

??? ?????? Next.js ???????? ??? ??? ???? ?? ??? ??? ???? ??? ?? ??? ???? ???? ??? ?? ? ?? ???? ????.

---

Next.js ???????? Zod ?????? ???? ??? ??? ????? ??? ??? ??? ???? ???? ??? ? ????. ????? ???? ??? ??? ????.

Zod? ?? ??? ??

1. Zod ??

?? ????? Zod? ???? ??? ?????. ??? ???? ? ??? ??? ? ????.

npm install zod

2. Zod ????

??? ????? ??? Zod? ?????.

import { z } from 'zod';

3. ??? ?? ??? ??

Zod? ??? ??? ???? ??? ??? ???? ???? ???? ??? ? ????. ??? ?? ???? ???? ??? ?? ??? ????.

const emailSchema = z.string().email({ message: "Invalid email address" });

? ???? ??? ????? ?? ??? ??? ????? ?????.

4. ??? ?? ??

??? ??? ????? Zod?? ???? ?? ?? ??? ??? ? ????. ?? ??? ??? ????.

import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  email: Yup.string()
    .email('Invalid email format')
    .required('Email is required'),
});

5. ??? ??? ?? ??(?? ??)

???? ??????? ????? ???? ? ?? ??? ????? ???? ??? ?? ??? ??? ??? ? ????. ???? ?? ??? ????.

const validator = require('validator');

if (validator.isEmail(emailInput)) {
  console.log('Valid email!');
} else {
  console.log('Invalid email!');
}

6. ??? ??

Next.js ???????? ??? ???? ?? ??? ??? ?? ? ?? ??? ?? ? ???? React Hook Form ?? Formik? ?? ?? ?? ?????? ??? ? ????.

? ??? ??? Zod? ???? Next.js ???????? ??? ??? ????? ???? ??? ??? ??? ????, ?????? ?? ??? ????? ??? ? ????.
10? ??? MVP? ???? ?????? ?? ?? ??? ??????.

? ??? Next.js?? ??? ??? ?? ?? ? ??? ????? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!