Publikuar më

Model Arkitekturë Next.js 3 për Shkallëzim

Autorët

Next.js: Bojlerplatat më të mira për ndërtimin e aplikacioneve të shkallueshme të uebit

Next.js është një kornizë React që ju lejon të ndërtoni aplikacione React të ndertuara në anën e serverit. Është një mjet i shkëlqyeshëm për ndërtimin e aplikacioneve të uebit, por mund të jetë e vështirë të shkalloni aplikacionin tuaj ndërsa ai rritet. Në këtë artikull, do të shohim disa nga bojlerplatat më të mira të Next.js për ndërtimin e aplikacioneve të shkallueshme të uebit.

Komuniteti i zhvilluesve të Next.js ka krijuar shumë bojlerplate që mund t'i përdorni për të filluar projektin tuaj. Këto bojlerplate janë të shkëlqyera për ndërtimin e aplikacioneve të shkallueshme të uebit. Ato janë gjithashtu të lehta për t'u zgjeruar dhe për t'u mirëmbajtur. Në këtë artikull, do të shohim disa nga bojlerplatat më të mira të Next.js për ndërtimin e aplikacioneve të shkallueshme të uebit.

Pse kemi nevojë për një bojlerplate?

Një bojlerplate është një shabllon që mund ta përdorni për të filluar një projekt të ri. Ai përmban të gjitha skedarët dhe dosjet e nevojshme për të filluar me një projekt. Është një mënyrë e shkëlqyeshme për të kursyer kohë dhe përpjekje kur filloni një projekt të ri.

Duke përdorur një bojlerplate, mund të përqendroheni në veçoritë themelore të aplikacionit tuaj në vend se të shpenzoni kohë për konfigurimin e projektit. Ai gjithashtu ju ndihmon të ndiqni praktikat më të mira dhe modelet që përdoren nga komuniteti.

Çfarë është një aplikacion i shkallueshëm i Next.js?

Një aplikacion i shkallueshëm është ai që mund të përballojë një numër të madh përdoruesish dhe kërkesash. Është gjithashtu i lehtë për t'u mirëmbajtur dhe zgjeruar. Është e rëndësishme të ndërtohet një aplikacion i shkallueshëm që nga fillimi për të shmangur ristrukturimin e kodit më vonë.

Shkallueshmëria është një faktor shumë i rëndësishëm kur ndërtohet një aplikacion i uebit. Është e rëndësishme të zgjidhni mjetet dhe arkitekturën e duhur për të ndërtuar një aplikacion të shkallueshëm. Ne duhet të kemi gjithmonë parasysh që aplikacioni ynë do të rritet në të ardhmen, jo vetëm duke u bërë një mbeturinë që e varrosim në repozitorin e GitHub.

Bojlerplata më e mirë për ndërtimin e aplikacioneve të shkallueshme të Next.js

Ka shumë bojlerplate të disponueshme për ndërtimin e aplikacioneve të shkallueshme të Next.js. Këtu janë disa nga bojlerplatat më të mira që mund t'i përdorni për të filluar projektin tuaj.

Bojlerplate Next.js nga alexeagleson

Kjo bojlerplate është një pikë fillese e shkëlqyeshme për ndërtimin e një aplikacioni Next.js. Është ndërtuar me TypeScript dhe përdor Next.js 12. Ai gjithashtu përdor Tailwind CSS për stilim. Është një bojlerplate e shkëlqyeshme për ndërtimin e një aplikacioni të shkallueshëm të uebit.

Veçori të dallueshme:

  • Next.js 12 (mund të ndihmoni për të përmirësuar në Next.js 13 në repo)

  • TypeScript

  • Bllokimi i Motorit

  • ESLint

  • Prettier

  • Hooks të Git (Husky)

  • Konfigurim i VS Code

  • Debugging i VS Code

  • Storybook

  • Shabllon komponentesh

  • Linting i komentit

Ne mund të fillojmë lehtësisht një projekt të ri duke klonuar repo-n dhe duke ekzekutuar këto komanda:

gh repo clone alexeagleson/nextjs-fullstack-app-template
# ose
git clone git@github.com:alexeagleson/nextjs-fullstack-app-template.git
# ose
git clone https://github.com/alexeagleson/nextjs-fullstack-app-template.git
# ose mund të përdorni edhe degit nëse dëshironi të përdorni shabllonin pa git në fillim

Nëse keni nevojë për TailwindCSS ose ndonjë kornizë stilim, ende duhet ta instaloni manualisht. Por, është mjaft e mirë për të filluar me këtë projekt, ka shumë ndihmë veçanërisht kur fillojmë me një ekip. Ka shumë praktika të mira dhe është e lehtë për t'u mirëmbajtur. Është gjithashtu e lehtë për t'u zgjeruar dhe për të shtuar veçori të reja. Ne mund të ndjekim udhëzuesin për të krijuar një komponent të ri ose për të shkruar CLI tonë për të automatizuar procesin.

Të gjitha llojet e lintingut dhe formatimit janë tashmë të konfiguruar. Ne mund të përdorim gjithashtu konfigurimin e VS Code për ta bërë më të lehtë punën me projektin. Ai gjithashtu ka një konfigurim të Storybook që mund ta përdorim për të ndërtuar komponentët tanë. Kjo bojlerplate ka hook commit-msg që mund ta përdorim për të kontrolluar mesazhin tonë të komentit. Ne mund të dokumentojmë lehtësisht komponentin tonë duke përdorur Storybook.

Repozitori: alexeagleson/nextjs-fullstack-app-template Blog: Si të ndërtohet arkitekturë e shkallueshme për projektin tuaj Next.js

Bojlerplate Next.js nga ipenywis

Ai tha në videon e tij shpjeguese të kësaj bojlerplate, është Konfigurimi i Projektit të React Senior që Ju Nevojitet si Zhvillues Junior. Ju mund të krijoni lehtësisht një arkitekturë si një Senior.

Në botën e shpejtë të zhvillimit të uebit sot, është thelbësore të keni mjetet dhe kornizat e duhura në dispozicion. Kjo është ku aplikacioni Next.js me Turborepo, Zustand, TailwindCSS dhe korniza TypeScript vjen - një kombinim i fuqishëm i teknologjive avangarde që mund ta bëjnë procesin tuaj të zhvillimit më të lëmuar, më të shpejtë dhe më efikas.

Një nga përfitimet kryesore të kësaj kornize është Next.js, një kornizë e nivelit të lartë për ndërtimin e aplikacioneve React të ndertuara në anën e serverit. Ai ofron ndarje të kodit automatike, performancë të optimizuar dhe vendosje të lehtë, duke e bërë atë zgjedhje ideale për zhvilluesit që duan të përqendrohen në ndërtimin e aplikacioneve të uebit të fuqishme dhe të shkallueshme pa u shqetësuar për infrastrukturën themelore.

Turborepo është një mjet tjetër që mund të përmirësojë ndjeshëm rrjedhën e punës tuaj duke optimizuar zhvillimin e monorepos. Ai i mundëson zhvilluesve të punojnë me paketa të shumta brenda një repozitori të vetëm, duke kursyer shumë kohë dhe energji ndërsa e bën më të lehtë menaxhimin dhe mirëmbajtjen e bazës së kodit tuaj.

Zustand është një bibliotekë e lehtë e menaxhimit të shtetit që ofron një qasje të thjeshtë dhe intuitive për menaxhimin e shtetit në aplikacionet React. Ai mund t'ju ndihmojë të mbani bazën e kodit tuaj të pastër dhe të organizuar ndërsa e bën më të lehtë punën me të dhe përditësimin e shtetit të aplikacionit tuaj.

TailwindCSS është një kornizë CSS e bazuar në shërbim që mund t'ju ndihmojë të dizenjoni ndërfaqe të përdoruesit të përgjegjshme dhe të personalizueshme me lehtësi. Me klasat e saj të shërbimit intuitiv dhe opsionet e personalizimit fleksibël, ju mund të krijoni dizajne të mahnitshme që duken mirë në çdo pajisje ose madhësi ekrani.

Së fundi, TypeScript shtohet shkrimin statik në gjuhë, duke siguruar siguri më të mirë të llojit dhe përvojë zhvilluesi. Kjo mund të ndihmojë në zbulimin e gabimeve herët dhe të sigurojë që baza e kodit tuaj të jetë e pastër dhe e organizuar.

Në përgjithësi, aplikacioni Next.js me Turborepo, Zustand, TailwindCSS dhe korniza TypeScript është një zgjedhje e fuqishme dhe moderne për çdo zhvillues që kërkon të ndërtojë aplikacione të uebit avangarde. Ndërsa mund të ketë një kurbë të vogël të të mësuarit, përfitimet ia vlenë përpjekjen, duke përfshirë kohë më të shkurtra të zhvillimit, performancë të përmirësuar dhe mirëmbajtje më të lehtë të bazave të kodit. Pra, pse të mos e provoni dhe të shihni vetë?

Vetëm jepni një provë, është me të vërtetë e mirë. Është e lehtë për t'u zgjeruar dhe mirëmbajtur.

Repozitori: ipenywis/your-react-boilerplate Youtube: Konfigurimi i Projektit të React Senior që Ju Nevojitet si Zhvillues Junior

Bojlerplate Next.js nga T3

Krijoni T3 App (CT3A) është një paketë fillestare për ndërtimin e aplikacioneve të uebit duke përdorur një grup të caktuar të teknologjive moderne që formojnë kornizën T3. Korniza T3 përbëhet nga TypeScript, tRPC dhe TailwindCSS. CT3A merr këtë kornizë dhe shtojnë teknologji shtesë për të krijuar një platformë të fuqishme dhe të lehtë për t'u përdorur për ndërtimin e aplikacioneve të uebit.

Një nga veçoritë e dallueshme të CT3A është përdorimi i TypeScript. Krijuesit e CT3A besojnë që TypeScript ofron një përvojë më të qëndrueshme dhe më pak frustruese sesa JavaScript i thjeshtë, veçanërisht për zhvilluesit e rinj në zhvillimin e uebit. Me TypeScript, zhvilluesit marrin reagim të menjëhershëm ndërsa shkruajnë kod, gjë që ndihmon në parandalimin e gabimeve dhe kursen kohë në kohën e gjatë.

Një tjetër teknologji kryesore e përdorur në CT3A është Next.js, një kornizë e popullarizuar e uebit për ndërtimin e aplikacioneve të bazuara në React. Next.js ofron një qasje pak të opinionuar dhe shumë të optimizuar për krijimin e aplikacioneve, gjë që e bën më të lehtë për zhvilluesit të marrin vendime të mira kur ndërtojnë aplikacionet e tyre.

CT3A gjithashtu përdor tRPC, një alternativë ndaj GraphQL që ofron një përvojë të përsosur të zhvillimit të klientit kundër një serveri të tipizuar, pa gjithë bojlerplaten. Duke përdorur TypeScript, tRPC ofron një përvojë të jashtëzakonshme zhvilluesi që është e lehtë për t'u përdorur dhe shumë e performantë.

Përveç këtyre teknologjive themelore, CT3A gjithashtu përfshin disa teknologji të tjera që përdoren zakonisht në zhvillimin e uebit. Këto përfshijnë Prisma, e cila siguron tipizim nga fundi në fund nga baza e të dhënave në aplikacion dhe ofron një sërë mjetesh për të bërë ndërveprime të përditshme me bazën e të dhënave më të lehta. CT3A gjithashtu përdor Tailwind CSS, një kornizë CSS e popullarizuar e bazuar në shërbim që e bën të lehtë krijimin e aplikacioneve të bukura pa u shqetësuar për emërtimin e klasave ose organizimin e skedarëve. Së fundi, CT3A përfshin NextAuth.js, një zgjidhje për të sjellë autentikim dhe siguri në aplikacionin tuaj Next.js pa mundimin e ndërtimit të tij nga e para.

Në përgjithësi, Krijoni T3 App është një pikë e shkëlqyeshme fillese për këdo që kërkon të ndërtojë aplikacione moderne të uebit duke përdorur një grup të fuqishëm dhe të lehtë për t'u përdorur të teknologjive. Me TypeScript, Next.js, tRPC, Prisma, Tailwind CSS dhe NextAuth.js, CT3A siguron një platformë gjithëpërfshirëse dhe shumë të performantë për ndërtimin e aplikacioneve moderne të uebit. Nëse po kërkoni të ndërtoni aplikacione të uebit me teknologjitë më të fundit dhe praktikat më të mira, CT3A është me siguri e vlefshme për t'u kontrolluar.

Lidhja: Krijoni T3 App

Përfundim

Kjo është e gjitha për sot. Shpresoj që e gjeni këtë artikull të dobishëm. Nëse keni ndonjë pyetje ose sugjerim, ju lutem më tregoni në seksionin e komenteve më poshtë. Faleminderit për leximin.

Diskuto në Twitter

NDAJ