# Si të ndërtoni një aplikacion modern SaaS me Next.js Next.js është një kornizë e fuqishme për React, e cila e bën ndërtimin e aplikacioneve moderne të uebit më të thjeshtë dhe më efikas. Në këtë artikull, ne do t'ju udhëzojmë përmes një udhëzimi të plotë hap pas hapi, se si të përdorni Next.js për të ndërtuar një aplikacion të thjeshtë SaaS. Ne do të mbulojmë të gjithë procesin nga ndërtimi i mjedisit të zhvillimit deri te krijimi i funksionaliteteve bazë. ## 1. Përgatitja e mjedisit Para se të filloni, nevojitet të siguroheni që mjedisi juaj i zhvillimit është i përgatitur. Ju lutemi ndiqni hapat e mëposhtëm: ### 1.1 Instaloni Node.js dhe npm Sigurohuni që kompjuteri juaj ka të instaluar Node.js dhe npm. Mund të ekzekutoni komandat e mëposhtme në terminal për të kontrolluar versionin: ```bash node -v npm -v ``` Nëse nuk e keni instaluar, mund të shkoni në [Faqen zyrtare të Node.js](https://nodejs.org/) për ta shkarkuar dhe instaluar. ### 1.2 Krijoni projektin Next.js Ekzekutoni komandën e mëposhtme në terminal për të krijuar një projekt të ri Next.js: ```bash npx create-next-app@latest my-saas-app cd my-saas-app ``` Kjo do të krijojë një projekt të ri me emrin `my-saas-app` dhe automatikisht do të instalojë varësitë e nevojshme. ## 2. Struktura e projektit Në direktorinë `my-saas-app`, do të shihni strukturën e mëposhtme bazë: ``` my-saas-app/ ├── pages/ │ ├── api/ │ ├── _app.js │ ├── index.js │ └── ... ├── public/ ├── styles/ └── ... ``` - **pages/**: Ruani faqet e aplikacionit. - **public/**: Ruani burimet publike, si imazhe, ikona etj. - **styles/**: Ruani skedarët CSS. ## 3. Ndërtimi i funksionaliteteve kryesore Në këtë seksion, ne do të implementojmë një sistem të thjeshtë regjistrimi dhe identifikimi të përdoruesve. ### 3.1 Konfiguroni bazën e të dhënave Në këtë shembull, ne do të përdorim Supabase si shërbimin e prapavijës. Ju lutemi ndiqni hapat e mëposhtëm: 1. Shkoni në [Faqen zyrtare të Supabase](https://supabase.io/) dhe krijoni një llogari. 2. Krijoni një projekt të ri dhe mbani mend URL-në e bazës së të dhënave dhe çelësin API. 3. Lidheni me bazën e të dhënave, krijoni tabelën e përdoruesve si më poshtë: ```sql create table users ( id serial primary key, email text unique not null, password text not null ); ``` ### 3.2 Instaloni klientin Supabase Instaloni bibliotekën e klientit Supabase në projektin Next.js: ```bash npm install @supabase/supabase-js ``` ### 3.3 Krijoni faqen e regjistrimit të përdoruesve Në direktorinë `pages/`, krijoni një skedar të ri `register.js` dhe shtoni përmbajtjen e mëposhtme: ```jsx 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('Regjistrimi ishte i suksesshëm!'); } }; return ( ); }; export default Register; ``` ### 3.4 Krijoni faqen e identifikimit të përdoruesve Po ashtu në direktorinë `pages/`, krijoni një skedar të ri `login.js` dhe shtoni përmbajtjen e mëposhtme: ```jsx 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('Identifikimi ishte i suksesshëm!'); } }; return ( ); }; export default Login; ``` ## 4. Zhvillimi i aplikacionit ### 4.1 Zgjidhni platformën e zhvillimit Ne përdorim Vercel për të zhvilluar aplikacionin tonë Next.js. Ju lutemi ndiqni hapat e mëposhtëm: 1. Shkoni në [Faqen zyrtare të Vercel](https://vercel.com/) dhe regjistroni një llogari. 2. Krijoni një projekt të ri dhe zgjidhni depozitën tuaj GitHub. 3. Sigurohuni që të shtoni URL-në e Supabase dhe çelësin API në variablat e mjedisit. 4. Klikoni në zhvillim, prisni që Vercel të përfundojë zhvillimin. ### 4.2 Verifikoni zhvillimin Pasi të përfundojë zhvillimi, do të merrni një URL publike. Vizitoni këtë URL për të siguruar që aplikacioni funksionon siç duhet. ## 5. Përmbledhje Përmes hapave të këtij artikulli, ju keni ndërtuar me sukses një aplikacion të thjeshtë SaaS me Next.js, duke përfshirë funksionalitetet e regjistrimit dhe identifikimit të përdoruesve. Fuqia e Next.js qëndron në fleksibilitetin dhe efikasitetin e tij, duke e bërë të lehtë zgjerimin për të përmbushur nevoja më komplekse. Shpresojmë që të vazhdoni të thelloni njohuritë tuaja dhe të ndërtoni më shumë aplikacione të mahnitshme!