Next.js ашиглан орчин үеийн SaaS програм хэрхэн бүтээх вэ
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-ийг арын үйлчилгээ болгон ашиглана. Дараах алхмуудыг дагана уу:
- [Supabase албан ёсны сайт](https://supabase.io/) руу орж, данс үүсгэнэ.
- Шинэ төсөл үүсгэж, таны мэдээллийн сантай холбоотой URL болон API түлхүүрийг тэмдэглэнэ.
- Мэдээллийн сантай холбогдож, дараах хэрэглэгчийн хүснэгтийг үүсгэнэ:
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 програмыг байрлуулахад ашиглана. Дараах алхмуудыг дагана уу:- [Vercel албан ёсны сайт](https://vercel.com/) руу орж, данс үүсгэнэ.
- Шинэ төсөл үүсгэж, таны GitHub хадгаламжийг сонгоно.
- Орчны хувьсагчид Supabase URL болон API түлхүүрийг нэмэхээ мартуузай.
- Байршуулах товчийг дарж, Vercel-ийг байршуулахыг хүлээнэ.
