Next.js ашиглан орчин үеийн SaaS програм хэрхэн бүтээх вэ

Next.js нь хүчирхэг React фреймворк бөгөөд орчин үеийн веб програмуудыг бүтээхийг илүү хялбар, үр ашигтай болгодог. Энэ нийтлэлд бид Next.js ашиглан энгийн SaaS програмыг бүтээх алхам алхмаар зааварчилгаа өгөх болно. Бид хөгжүүлэлтийн орчныг тохируулах, үндсэн функцийг бий болгох бүх процессыг хамрах болно.

1. Орчны бэлтгэл

Эхлэхийн өмнө таны хөгжүүлэлтийн орчин бэлэн байгаа эсэхийг шалгах хэрэгтэй. Дараах алхмуудыг дагана уу:

1.1 Node.js болон npm суулгах

Таны компьютер дээр Node.js болон npm суулгасан эсэхийг шалгаарай. Версийг шалгахын тулд терминалд дараах командыг гүйцэтгэнэ үү:

node -v
npm -v

Хэрэв та суулгаагүй бол [Node.js албан ёсны сайт](https://nodejs.org/) руу орж, татаж суулгаарай.

1.2 Next.js төсөл үүсгэх

Терминалд дараах командыг гүйцэтгэж шинэ Next.js төсөл үүсгэнэ:

npx create-next-app@latest my-saas-app
cd my-saas-app

Энэ нь `my-saas-app` нэртэй шинэ төслийг үүсгэж, шаардлагатай хамааралтай файлуудыг автоматаар суулгах болно.

2. Төсөл бүтэц

`my-saas-app` директорт та дараах үндсэн бүтэцтэй танилцана:

my-saas-app/
├── pages/
│   ├── api/
│   ├── _app.js
│   ├── index.js
│   └── ...
├── public/
├── styles/
└── ...

• pages/: Програмын хуудсуудыг хадгалах.
• public/: Зураг, дүрс гэх мэт нийтийн нөөцийг хадгалах.
• styles/: CSS файлуудыг хадгалах.

3. Гол функцийг бүтээх

Энэ хэсэгт бид энгийн хэрэглэгчийн бүртгэл болон нэвтрэх системийг хэрэгжүүлэх болно.

3.1 Мэдээллийн сантай холбогдох

Энэхүү жишээнд бид Supabase-ийг арын үйлчилгээ болгон ашиглана. Дараах алхмуудыг дагана уу:

1. [Supabase албан ёсны сайт](https://supabase.io/) руу орж, данс үүсгэнэ.
2. Шинэ төсөл үүсгэж, таны мэдээллийн сантай холбоотой URL болон API түлхүүрийг тэмдэглэнэ.
3. Мэдээллийн сантай холбогдож, дараах хэрэглэгчийн хүснэгтийг үүсгэнэ:

create table users (
  id serial primary key,
  email text unique not null,
  password text not null
);

3.2 Supabase клиент суулгах

Next.js төсөлд Supabase клиентын номын санг суулгана:

npm install @supabase/supabase-js

3.3 Хэрэглэгчийн бүртгэлийн хуудсыг үүсгэх

`pages/` директорт шинэ файл `register.js` үүсгэж, дараах агуулгыг нэмнэ:

import { useState } from 'react';
import { createClient } from '@supabase/supabase-js';

const supabase = createClient('YOUR_SUPABASE_URL', 'YOUR_SUPABASE_ANON_KEY');

const Register = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleRegister = async () => {
    const { user, error } = await supabase.auth.signUp({
      email,
      password,
    });

    if (error) {
      console.error(error);
    } else {
      alert('Бүртгэл амжилттай!');
    }
  };

  return (
    

      
Бүртгүүлэх
       setEmail(e.target.value)} />
       setPassword(e.target.value)} />
      Бүртгүүлэх
    
  );
};

export default Register;

3.4 Хэрэглэгчийн нэвтрэх хуудсыг үүсгэх

Мөн `pages/` директорт шинэ файл `login.js` үүсгэж, дараах агуулгыг нэмнэ:

import { useState } from 'react';
import { createClient } from '@supabase/supabase-js';

const supabase = createClient('YOUR_SUPABASE_URL', 'YOUR_SUPABASE_ANON_KEY');

const Login = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async () => {
    const { user, error } = await supabase.auth.signIn({
      email,
      password,
    });

    if (error) {
      console.error(error);
    } else {
      alert('Нэвтрэлт амжилттай!');
    }
  };

  return (
    

      
Нэвтрэх
       setEmail(e.target.value)} />
       setPassword(e.target.value)} />
      Нэвтрэх
    
  );
};

export default Login;

4. Програмыг байршуулалт

4.1 Байршуулах платформ сонгох

Бид Vercel-ийг Next.js програмыг байрлуулахад ашиглана. Дараах алхмуудыг дагана уу:

1. [Vercel албан ёсны сайт](https://vercel.com/) руу орж, данс үүсгэнэ.
2. Шинэ төсөл үүсгэж, таны GitHub хадгаламжийг сонгоно.
3. Орчны хувьсагчид Supabase URL болон API түлхүүрийг нэмэхээ мартуузай.
4. Байршуулах товчийг дарж, Vercel-ийг байршуулахыг хүлээнэ.

4.2 Байршил шалгах

Байршил дууссаны дараа та нээлттэй URL хүлээн авах болно. Энэ URL руу орж, програм хэвийн ажиллаж байгааг шалгана уу.

5. Дүгнэлт

Энэхүү нийтлэлийн алхмуудыг дагаснаар та Next.js ашиглан энгийн SaaS програмыг амжилттай бүтээсэн бөгөөд хэрэглэгчийн бүртгэл болон нэвтрэх функцийг оруулсан. Next.js-ийн хүчирхэг байдал нь түүний уян хатан байдал, үр ашигт оршдог бөгөөд илүү нарийн төвөгтэй шаардлагыг хангахын тулд хялбархан өргөжүүлж болно. Та энэ үндсэн дээр гүнзгийрч, илүү гайхалтай програмуудыг бүтээхийг хүсч байна!