Jinsi ya Kutumia Next.js Kujenga Maombi ya SaaS ya Kisasa

Next.js ni mfumo mzuri wa React, ambao unafanya kujenga maombi ya wavuti ya kisasa kuwa rahisi na yenye ufanisi zaidi. Katika makala hii, tutakupa mwongozo wa hatua kwa hatua, kukufundisha jinsi ya kutumia Next.js kujenga programu rahisi ya SaaS. Tutashughulikia mchakato mzima kutoka kwa kuandaa mazingira ya maendeleo hadi kuunda kazi za msingi.

1. Kuandaa Mazingira

Kabla ya kuanza, tunahitaji kuhakikisha kuwa mazingira yako ya maendeleo yameandaliwa. Tafadhali fuata hatua zifuatazo:

1.1 Sakinisha Node.js na npm

Hakikishia kuwa kompyuta yako ina Node.js na npm. Unaweza kukimbia amri zifuatazo kwenye terminal ili kuangalia toleo:

node -v
npm -v

Ikiwa hujaweka, unaweza kutembelea Tovuti rasmi ya Node.js kupakua na kusakinisha.

1.2 Unda Mradi wa Next.js

Kimbia amri zifuatazo kwenye terminal ili kuunda mradi mpya wa Next.js:

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

Hii itaunda mradi mpya uitwao my-saas-app, na kwa otomatiki itasakinisha utegemezi unaohitajika.

2. Muundo wa Mradi

Katika saraka ya my-saas-app, utaona muundo wa msingi ufuatao:

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

• pages/: Hifadhi kurasa za programu.
• public/: Hifadhi rasilimali za umma, kama picha, alama, n.k.
• styles/: Hifadhi faili za CSS.

3. Kujenga Kazi Kuu

Katika sehemu hii, tutatekeleza mfumo rahisi wa usajili na kuingia kwa mtumiaji.

3.1 Weka Database

Katika mfano huu, tunatumia Supabase kama huduma ya nyuma. Tafadhali fuata hatua zifuatazo:

1. Tembelea Tovuti rasmi ya Supabase na uunde akaunti.
2. Unda mradi mpya, na kumbuka URL yako ya database na funguo za API.
3. Unganisha na database, unda jedwali la watumiaji kama ifuatavyo:

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

3.2 Sakinisha Maktaba ya Klienti ya Supabase

Sakinisha maktaba ya kliente ya Supabase katika mradi wa Next.js:

npm install @supabase/supabase-js

3.3 Unda Ukurasa wa Usajili wa Mtumiaji

Katika saraka ya pages/, unda faili mpya register.js, na ongeza yaliyomo yafuatayo:

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('Usajili umefanikiwa!');
    }
  };

  return (
    
      

# Usajili

       setEmail(e.target.value)} 
      />
       setPassword(e.target.value)} 
      />
      Usajili
    
  );
};

export default Register;

3.4 Unda Ukurasa wa Kuingia wa Mtumiaji

Vivyo hivyo katika saraka ya pages/, unda faili mpya login.js, na ongeza yaliyomo yafuatayo:

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('Kuingia kumefanikiwa!');
    }
  };

  return (
    
      

# Kuingia

       setEmail(e.target.value)} 
      />
       setPassword(e.target.value)} 
      />
      Kuingia
    
  );
};

export default Login;

4. Kupeleka Programu

4.1 Chagua Jukwaa la Kupeleka

Tunatumia Vercel kupeleka programu yetu ya Next.js. Tafadhali fuata hatua zifuatazo:

1. Tembelea Tovuti rasmi ya Vercel na ujiandikishe.
2. Unda mradi mpya na uchague hifadhi yako ya GitHub.
3. Hakikisha kuongeza URL ya Supabase na funguo za API katika mazingira.
4. Bonyeza kupeleka, subiri Vercel ikamilishe kupeleka.

4.2 Thibitisha Kupeleka

Baada ya kupeleka, utapata URL ya umma. Tembelea URL hii, hakikisha programu inafanya kazi vizuri.

5. Muhtasari

Kupitia hatua za makala hii, umeshafanikiwa kutumia Next.js kujenga programu rahisi ya SaaS, ikiwa na kazi za usajili na kuingia kwa mtumiaji. Uwezo wa Next.js uko katika ufanisi wake na unyumbufu, unaweza kupanua kwa urahisi ili kukidhi mahitaji magumu zaidi. Tunatumai utaendelea kujifunza zaidi, kujenga programu zaidi za kushangaza!