Naqshadaha iyo miisaaniyadda Next.js 3

Next.js waa framework React ah oo kuu oggolaanaya inaad dhisto codsiyada React ee dhinaca server-ka. Waa qalab weyn oo lagu dhisayo codsiyada shabakadda, laakiin waxay noqon kartaa mid adag in lagu balaariyo codsigaaga marka uu sii kordho. Maqaalkan, waxaan eegi doonnaa qaar ka mid ah boilerplates-ka ugu fiican ee Next.js ee loogu talagalay dhismaha codsiyada shabakadda oo la ballaarin karo.

Bulshada horumariyeyaasha Next.js waxay abuurtay boilerplates badan oo aad isticmaali karto si aad u bilowdo mashruucaaga. Boilerplates-kan waa kuwo fiican oo loogu talagalay dhismaha codsiyada shabakadda oo la ballaarin karo. Sidoo kale waxay fududahay in la ballaariyo oo la ilaaliyo. Maqaalkan, waxaan eegi doonnaa qaar ka mid ah boilerplates-ka ugu fiican ee Next.js ee loogu talagalay dhismaha codsiyada shabakadda oo la ballaarin karo.

Maxaa loo baahan yahay boilerplate?

Boilerplate waa qaab-template ah oo aad isticmaali karto si aad u bilowdo mashruuc cusub. Waxay ka kooban tahay dhammaan faylasha iyo faylalka lagama maarmaanka ah si loo bilaabo mashruuc. Waa hab fiican oo lagu badbaadinayo waqtiga iyo dadaalka marka la bilaabayo mashruuc cusub.

Adigoo isticmaalaya boilerplate, waxaad diiradda saari kartaa sifooyinka asaasiga ah ee codsigaaga halkii aad waqti ku bixin lahayd dejinta mashruuca. Waxay sidoo kale kaa caawinaysaa inaad raacdo dhaqamada ugu wanaagsan iyo qaababka ay bulshada isticmaalaan.

Maxay tahay codsiga Next.js oo la ballaarin karo?

Codsi la ballaarin karo waa mid la qabsan kara tiro badan oo isticmaaleyaal ah iyo codsiyo. Sidoo kale waa fududahay in la ilaaliyo oo la ballaariyo. Waa muhiim in la dhiso codsi la ballaarin karo laga bilaabo bilowga si looga fogaado dib u habeynta koodhka dib dambe.

Balaarin ayaa ah qodob aad muhiim u ah marka la dhisayo codsiga shabakadda. Waa muhiim in la doorto qalabka saxda ah iyo qaab dhismeedka si loo dhiso codsi la ballaarin karo. Had iyo jeer waa inaan maskaxda ku haynaa in codsigeena uu sii kordhi doono mustaqbalka, ma aha oo kaliya inuu noqdo qashin aan ku aasno kaydka GitHub.

Boilerplates-ka ugu fiican ee loogu talagalay dhismaha codsiyada Next.js oo la ballaarin karo

Waxaa jira boilerplates badan oo diyaar ah oo loogu talagalay dhismaha codsiyada Next.js oo la ballaarin karo. Halkan waxaa ah qaar ka mid ah boilerplates-ka ugu fiican ee aad isticmaali karto si aad u bilowdo mashruucaaga.

Next.js Boilerplate by alexeagleson

Boilerplate-kan waa meel fiican oo laga bilaabo dhismaha codsiga Next.js. Waxaa lagu dhisay TypeScript oo waxay isticmaashaa Next.js 12. Waxay sidoo kale isticmaashaa Tailwind CSS si loo habeeyo. Waa boilerplate fiican oo loogu talagalay dhismaha codsiga shabakadda oo la ballaarin karo.

Sifooyinka ugu muhiimsan:

• Next.js 12 (waxaad ka caawin kartaa inaad ku kordhiso Next.js 13 kaydka)

• TypeScript

• Engine Locking

• ESLint

• Prettier

• Git Hooks (Husky)

• VS Code Config

• VS Code Debugging

• Storybook

• Qaab-template-ka qaybta

• Linting-ka xiriirka

Waxaan si sahlan u bilaabi karnaa mashruuc cusub adigoo soo koobiyay kaydka oo fulinaya amarrada soo socda:

gh repo clone alexeagleson/nextjs-fullstack-app-template
# ama
git clone git@github.com:alexeagleson/nextjs-fullstack-app-template.git
# ama
git clone https://github.com/alexeagleson/nextjs-fullstack-app-template.git
# ama waxaad sidoo kale isticmaali kartaa degit haddii aad rabto inaad isticmaasho qaab-template-ka la'aan git marka hore

Haddii aad u baahan tahay TailwindCSS ama qaab-habeyn kasta, waxaad wali u baahan tahay inaad si gacanta ugu rakibto. Laakiin, waa fiican in lagu bilaabo mashruucan, waxay leedahay caawimo badan gaar ahaan marka aan bilowno koox. Waxay leedahay dhaqamo badan oo wanaagsan waxaana fududahay in la ilaaliyo. Sidoo kale waa fududahay in la ballaariyo oo la kordhiyo sifooyin cusub. Waxaan raaci karnaa tilmaamaha si aan u abuurno qayb cusub ama aan qorno CLI-keena si aan u otomaatigayno habka.

Dhammaan noocyada linting iyo qaab-dhismeedka ayaa horeyba loo dejiyay. Waxaan sidoo kale isticmaali karnaa VS Code config si ay u fududaato in lagu shaqeeyo mashruuca. Waxay sidoo kale leedahay Storybook config oo aan isticmaali karno si aan u dhisno qaybaha. Boilerplate-kan waxay leedahay xiriirka commit-msg oo aan isticmaali karno si aan u linteyno farriinta xiriirka. Waxaan si fudud u dukumeenti karnaa qaybteena adiga oo isticmaalaya Storybook.

Kaydka: alexeagleson/nextjs-fullstack-app-template Blog: Sida loo Dhisho Qaab-dhismeed La Ballaarin Karo oo loogu talagalay Mashruucaaga Next.js

Next.js Boilerplate by ipenywis

Wuxuu ku sheegay fiidiyowgiisa sharaxaadda ee boilerplate-kan, waa Dejinta Mashruuca React ee Sare ee Aad U Baahan Tahay sida Horumariye Cusub. Waad si sahlan u abuuri kartaa qaab dhismeed sida Senior.

Adduunka degdega ah ee horumarinta shabakadda ee maanta, waa muhiim in la haysto qalabka iyo frameworks-ka saxda ah ee aad gacanta ku hayso. Taasi waa halka codsiga Next.js ee leh Turborepo, Zustand, TailwindCSS, iyo stack-ga TypeScript uu soo galo - isku-darka awoodda leh ee tignoolajiyada casriga ah ee ka dhigi kara habkaaga horumarinta mid siman, degdeg ah, oo waxtar badan leh.

Mid ka mid ah faa'iidooyinka muhiimka ah ee stack-kan waa Next.js, oo ah framework heer sare ah oo loogu talagalay dhismaha codsiyada React ee dhinaca server-ka. Waxay bixisaa qaybinta koodhka otomaatigga ah, waxqabadka la hagaajiyay, iyo dejinta fudud, taasoo ka dhigaysa ikhtiyaar wanaagsan oo loogu talagalay horumariyeyaasha kuwaas oo doonaya inay diiradda saaraan dhismaha codsiyada shabakadda oo adag oo la ballaarin karo iyada oo aan loo baahnayn in laga walaaco kaabayaasha hoose.

Turborepo waa qalab kale oo si weyn u hagaajin kara shaqadaada adiga oo hagaajinaya horumarinta monorepo. Waxay u saamaxdaa horumariyeyaasha inay la shaqeeyaan xirmooyin badan oo gudaha kaydka hal, iyagoo badbaadinaya wakhti badan iyo tamar halka ay ka dhigayso mid fudud in la maareeyo oo la ilaaliyo saldhiggaaga koodhka.

Zustand waa maktabad fudud oo maareynta xaaladda ah oo bixisa hab fudud oo loo fahmi karo si loo maareeyo xaaladda codsiyada React. Waxay kaa caawin kartaa inaad ilaaliso saldhiggaaga koodhka nadiif oo la abaabulay halka ay ka dhigayso mid fudud in la shaqeeyo oo la cusboonaysiiyo xaaladda codsigaaga.

TailwindCSS waa framework CSS utility-first ah oo kaa caawin kara inaad naqshadeyso isdhexgalka isticmaalaha ee la jawaabo oo la habeyn karo oo leh fududaanta. Adigoo isticmaalaya fasalada utility ee fudud iyo ikhtiyaarka is-habeyninta oo dabacsan, waxaad abuuri kartaa naqshadeyn cajiib ah oo fiican oo ku saabsan qalab kasta ama cabbir shaashad.

Ugu dambeyntii, TypeScript waxay ku daraysaa noocyada static-ga luqadda, taasoo bixisa badbaadada noocyada wanaagsan iyo waayo-aragnimo horumariye. Tani waxay kaa caawin kartaa inaad soo qabato khaladaadka hore oo aad hubiso in saldhiggaaga koodhka uu nadiif yahay oo la abaabulay.

Guud ahaan, codsiga Next.js oo leh Turborepo, Zustand, TailwindCSS, iyo stack-ga TypeScript waa ikhtiyaar awood leh oo casri ah oo loogu talagalay horumariye kasta oo raba inuu dhiso codsiyada shabakadda ee ugu dambeeya. Inkasta oo laga yaabo inay jiraan waxoogaa barasho ah, faa'iidooyinka ayaa u qalma dadaalka, oo ay ku jiraan waqtiyo horumarin oo degdeg ah, waxqabadka la hagaajiyay, iyo dayactirka fudud ee saldhigyada koodhka. Markaa maxaad tijaabisay oo aad aragto adiga?

Kaliya siiso fursad, runtii waa fiican. Waa fududahay in la ballaariyo oo la ilaaliyo.

Kaydka: ipenywis/your-react-boilerplate Youtube: Dejinta Mashruuca React ee Sare ee Aad U Baahan Tahay sida Horumariye Cusub

Next.js Boilerplate by T3

Abuur App-ka T3 (CT3A) waa kit bilow ah oo loogu talagalay dhismaha codsiyada shabakadda adiga oo isticmaalaya tignoolajiyada casriga ah ee gaarka ah ee sameeya stack-ga T3. Stack-ga T3 waxaa ka kooban TypeScript, tRPC, iyo TailwindCSS. CT3A waxay qaadanaysaa stack-kan waxayna ku daraysaa tignoolajiyada dheeraadka ah si ay u abuuraan madal awood leh oo fudud oo loogu talagalay dhismaha codsiyada shabakadda.

Mid ka mid ah sifooyinka ugu muhiimsan ee CT3A waa isticmaalka TypeScript. Abuurayaasha CT3A waxay aaminsan yihiin in TypeScript ay bixiso waayo-aragnimo isku mid ah oo ka yar niyad-jabka marka loo eego JavaScript-ka caadiga ah, gaar ahaan horumariyeyaasha cusub ee horumarinta shabakadda. Adigoo isticmaalaya TypeScript, horumariyeyaashu waxay helaan jawaab celin toos ah iyagoo qoraya koodhka, taasoo kaa caawinaysa inaad ka fogaato khaladaadka oo aad badbaadiso waqti muddada dheer.

Tignoolaji kale oo muhiim ah oo loo isticmaalo CT3A waa Next.js, oo ah framework shabakad caan ah oo loogu talagalay dhismaha codsiyada ku saleysan React. Next.js waxay bixisaa qaab-dhismeed fudud oo aan fikrado badan lahayn oo loogu talagalay abuurista codsiyada, taasoo ka dhigaysa mid fudud in horumariyeyaashu ay sameeyaan go'aamo wanaagsan marka la dhisayo codsiyadooda.

CT3A sidoo kale waxay isticmaashaa tRPC, oo ah beddelka GraphQL oo bixiya waayo-aragnimo horumarin oo macaamiil ah oo aan kala go'in lahayn oo ka soo horjeeda server-ka oo noocyada la ammaanay, la'aan dhammaan boilerplate-ka. Adigoo isticmaalaya TypeScript, tRPC waxay bixisaa waayo-aragnimo horumariye oo cajiib ah oo fudud in la isticmaalo oo aad u waxqabad badan.

Marka lagu daro tignoolajiyada asaasiga ah, CT3A waxay sidoo kale ka kooban tahay tignoolajiyada kale ee caanka ah ee lagu isticmaalo horumarinta shabakadda. Kuwani waxaa ka mid ah Prisma, kaasoo bixiya amniga noocyada dhammaystiran ee laga bilaabo database-ka ilaa codsiga oo wuxuu bixiyaa xirmooyin qalab oo ka dhigaya isdhexgalka maalinlaha ah ee database-ka mid fudud. CT3A waxay sidoo kale isticmaashaa Tailwind CSS, oo ah framework CSS utility-first ah oo caan ah oo ka dhigaysa mid fudud in la abuuro codsiyada oo muuqaal fiican leh iyada oo aan laga walwalin magacaabista fasalada ama abaabulka faylasha. Ugu dambeyntii, CT3A waxay ka kooban tahay NextAuth.js, oo ah xal lagu keenayo xaqiijinta iyo amniga codsigaaga Next.js iyada oo aan loo baahnayn in la dhiso naftaada.

Guud ahaan, Abuur App-ka T3 waa meel fiican oo laga bilaabo qof kasta oo raba inuu dhiso codsiyada shabakadda ee casriga ah adiga oo isticmaalaya tignoolajiyada awoodda leh oo fudud in la isticmaalo. Adigoo isticmaalaya TypeScript, Next.js, tRPC, Prisma, Tailwind CSS, iyo NextAuth.js, CT3A waxay bixisaa madal dhammaystiran oo aad u waxqabad badan oo loogu talagalay dhismaha codsiyada shabakadda ee casriga ah. Haddii aad raadinayso inaad dhiso codsiyada shabakadda leh tignoolajiyada ugu dambeeya iyo dhaqamada ugu wanaagsan, CT3A waa ikhtiyaar mudan in la eego.

Xiriirinta: Abuur App-ka T3

Gunaanad

Taasi waa dhamaan maanta. Waxaan rajeynayaa inaad maqaalkan ka heshay mid waxtar leh. Haddii aad qabto su'aalo ama talooyin, fadlan ii sheeg qaybta faallooyinka ee hoose. Waad ku mahadsan tahay akhrinta.