Next.js көмегімен заманауи SaaS қосымшасын қалай құруға болады

Next.js - заманауи веб-қосымшаларды құруды жеңілдететін қуатты React фреймворкы. Бұл мақалада біз Next.js көмегімен қарапайым SaaS қосымшасын қалай құруды толық қадамдық нұсқаулық арқылы үйретеміз. Біз әзірлеу ортасын орнатудан бастап негізгі функцияларды жасауға дейінгі барлық процесті қамтимыз.

1. Ортаны дайындау

Бастамас бұрын, сіздің әзірлеу ортаңыз дайын екеніне көз жеткізуіміз керек. Төмендегі қадамдарды орындаңыз:

1.1 Node.js және npm орнату

Сіздің компьютеріңізде Node.js және npm орнатылғанына көз жеткізіңіз. Нұсқаны тексеру үшін терминалда келесі командаларды орындаңыз:

node -v
npm -v

Егер сізде орнатылмаған болса, Node.js ресми сайтына кіріп, жүктеп алып, орнатыңыз.

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 ресми сайтына кіріп, есептік жазба жасаңыз.
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 Орналастыру платформасын таңдау

Біз Next.js қосымшамызды орналастыру үшін Vercel-ді пайдаланамыз. Төмендегі қадамдарды орындаңыз:

1. Vercel ресми сайтына кіріп, есептік жазба жасаңыз.
2. Жаңа жоба жасап, GitHub репозиторийіңізді таңдаңыз.
3. Орташа айнымалыларда Supabase URL мен API кілтін қосқаныңызға көз жеткізіңіз.
4. Орналастыруды басыңыз, Vercel-дің орналастыруды аяқтауын күтіңіз.

4.2 Орналастыруды тексеру

Орналастыру аяқталғаннан кейін, сізге ашық URL беріледі. Бұл URL-ге кіріп, қосымшаның дұрыс жұмыс істеп тұрғанын тексеріңіз.

5. Қорытынды

Бұл мақаладағы қадамдар арқылы сіз Next.js көмегімен қарапайым SaaS қосымшасын, соның ішінде пайдаланушы тіркеу және кіру функцияларын сәтті құрдыңыз. Next.js-тің күшті тұсы - оның икемділігі мен тиімділігі, оны күрделі талаптарға оңай кеңейтуге болады. Сіз осы негізде тереңірек зерттеп, одан да таңғажайып қосымшаларды құра аласыз деп үміттенеміз!