Sida Loo Isticmaalo Next.js Si Loogu Dhiso Codsiga Casriga ah ee SaaS

Next.js waa qaab-dhismeed awood leh oo React ah, kaas oo ka dhigaya dhisidda codsiyada webka casriga ah mid sahlan oo waxtar leh. Maqaalkan, waxaan ku siin doonaa hage talaabo-talaabo ah oo dhameystiran, si aad u barato sida loo isticmaalo Next.js si aad u dhisto codsi fudud oo SaaS ah. Waxaan ka hadli doonaa habka laga bilaabo dhisidda deegaanka horumarinta ilaa abuurista hawlaha aasaasiga ah.

1. Diyaarinta Deegaanka

Ka hor inta aanan bilaabin, waxaan u baahanahay inaan hubinno in deegaankaaga horumarinta uu diyaar yahay. Fadlan raac talaabooyinka hoos ku xusan:

1.1 Ku rakib Node.js iyo npm

Hubi in kombiyuutarkaaga uu ku rakiban yahay Node.js iyo npm. Waxaad ku ordi kartaa amarradan hoos ku qoran terminal-ka si aad u hubiso noocyada:

node -v
npm -v

Haddii aadan weli rakibin, waxaad booqan kartaa Bogga Rasmiga ah ee Node.js si aad u soo dejiso oo aad u rakibto.

1.2 Abuur Mashruuc Next.js

Ku ordi amarkan hoos ku qoran terminal-ka si aad u abuurto mashruuc cusub oo Next.js ah:

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

Tani waxay abuuri doontaa mashruuc cusub oo la yiraahdo my-saas-app, waxayna si otomaatig ah u rakibi doontaa waxyaabaha loo baahan yahay.

2. Qaab-dhismeedka Mashruuca

Dhexda galka my-saas-app, waxaad arki doontaa qaab-dhismeedkan aasaasiga ah:

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

pages/: Meesha lagu kaydiyo bogagga codsiga.
public/: Meesha lagu kaydiyo kheyraadka guud, sida sawirada, astaamaha iwm.
styles/: Meesha lagu kaydiyo faylasha CSS.

3. Dhisida Hawlaha Aasaasiga ah

Qaybtan, waxaan hirgelin doonaa nidaam fudud oo diiwaangelinta iyo galitaanka isticmaale.

3.1 Dejinta Kaydka Xogta

Tusaalahan, waxaan isticmaaleynaa Supabase sidii adeegga dambe. Fadlan raac talaabooyinka hoos ku xusan:

Booqo Bogga Rasmiga ah ee Supabase oo abuur akoon.
Abuur mashruuc cusub, oo xusuusnow URL-kaaga kaydka iyo furaha API.
Ku xidh kaydka xogta, abuur miiska isticmaale sida hoos ku qoran:

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

3.2 Ku rakib Macaamiisha Supabase

Ku rakib maktabadda macaamiisha Supabase mashruuca Next.js:

npm install @supabase/supabase-js

3.3 Abuur Bogga Diiwaangelinta Isticmaalaha

Galka pages/, abuur fayl cusub register.js, oo ku dar waxyaabaha hoos ku qoran:

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('Diiwaangelinta Guuleysatay!');
    }
  };

  return (
    
      

# Diiwaangelinta

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

export default Register;

3.4 Abuur Bogga Galitaanka Isticmaalaha

Sidoo kale, galka pages/, abuur fayl cusub login.js, oo ku dar waxyaabaha hoos ku qoran:

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('Galitaanka Guuleysatay!');
    }
  };

  return (
    
      

# Galitaanka

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

export default Login;

4. Daabacaadda Codsiga

4.1 Dooro Madal Daabacaad

Waxaan isticmaaleynaa Vercel si aan u daabacno codsigeena Next.js. Fadlan raac talaabooyinka hoos ku xusan:

Booqo Bogga Rasmiga ah ee Vercel oo iska diiwaangeli.
Abuur mashruuc cusub oo dooro kaydkaaga GitHub.
Hubi inaad ku darto URL-ka Supabase iyo furaha API ee isbeddelada deegaanka.
Guji daabacaadda, sug Vercel inuu dhameystiro daabacaadda.

4.2 Hubi Daabacaadda

Kadib daabacaadda, waxaad heli doontaa URL dadweyne. Booqo URL-kan, hubi in codsigu si sax ah u shaqeeyo.

5. Gunaanad

Iyadoo la raacayo talaabooyinka maqaalkaan, waxaad si guul leh u dhistay codsi fudud oo SaaS ah adigoo isticmaalaya Next.js, oo ay ku jiraan hawlaha diiwaangelinta iyo galitaanka isticmaalaha. Awoodda Next.js waxay ku jirtaa dabacsanaanteeda iyo waxtarkeeda, taas oo u oggolaaneysa in si sahlan loo ballaariyo si loo daboolo baahiyo adag. Waxaan rajeynayaa inaad ku sii socoto aasaaskan, dhisid codsiyo kale oo cajiib ah!