Modela arşîtektura Next.js 3 ya skalabil

Çima pêwîstî bi şablonê heye?

Şablon, şablonek e ku hûn dikarin ji bo destpêkirina projeyek nû bikar bînin. Hemû pel û peldanên pêwîst ji bo destpêkirina projeyek tê de hene. Ew rêyek baş e ku hûn di dema destpêkirina projeyek nû de dem û hewlê xwe bidin hev.

Bi bikaranîna şablonê, hûn dikarin li ser taybetmendiyên bingehîn ên serîlêdana xwe bisekinin, li şûna ku hûn demê xwe li ser danîna projeyê bidin. Ew dihêle ku hûn rêbazên baş û şablonên ku ji hêla civakê ve têne bikar anîn bişopînin.

Serîlêdana Next.js ya berfireh çi ye?

Serîlêdana berfireh ew e ku dikare hejmareke mezin ji bikarhêneran û daxwazan bi rêve bibe. Ew jî hêsan e ku meriv lênihêrî û berfireh bike. Ji bo ku hûn piştî vê yekê kodê nû nekin, girîng e ku hûn serîlêdana berfireh ji destpêkê de ava bikin.

Berfirehî faktorêk pir girîng e dema ku hûn serîlêdanek webê ava dikin. Girîng e ku hûn amûr û mîmariya rast hilbijêrin da ku serîlêdana berfireh ava bikin. Divê em her dem di hişê xwe de bigirin ku serîlêdana me dê di pêşerojê de mezin bibe, ne tenê wekî çopê ku em di depoya GitHub de vedişêrin.

Şablona herî baş ji bo avakirina serîlêdanên Next.js yên berfireh

Gelek şablon hene ku ji bo avakirina serîlêdanên Next.js yên berfireh hene. Li vir hin şablonên herî baş hene ku hûn dikarin ji bo destpêkirina projeya xwe bikar bînin.

Next.js Şablon ji hêla alexeagleson

Ev şablon xalek baş ji bo avakirina serîlêdana Next.js e. Ew bi TypeScript hatiye çêkirin û Next.js 12 bikar tîne. Ew her weha Tailwind CSS ji bo şêwazê bikar tîne. Ew şablonek baş e ji bo avakirina serîlêdana webê ya berfireh.

Taybetmendiyên sereke:

• Next.js 12 (hûn dikarin di repo de alîkariyê bikin ku hûn berbi Next.js 13 ve biguherînin)

• TypeScript

• Blokirina Motorê

• ESLint

• Prettier

• Hooksên Git (Husky)

• Konfigurasyona VS Code

• Debuggingê VS Code

• Storybook

• Şablona pêkhateyê

• Lintingê commitê

Em dikarin bi hêsanî projeyek nû bi klonkirina depoyê û rêvebirina fermanên jêrîn dest pê bikin:

gh repo clone alexeagleson/nextjs-fullstack-app-template
# an jî
git clone git@github.com:alexeagleson/nextjs-fullstack-app-template.git
# an jî
git clone https://github.com/alexeagleson/nextjs-fullstack-app-template.git
# an jî hûn dikarin degit bikar bînin heke hûn dixwazin şablona bêyî git bikar bînin di destpêkê de

Heke we pêwîstî bi TailwindCSS an jî her çarçoveyek şêwazê hebe, divê hûn wê bi dest xwe ve saz bikin. Lê, ew pir baş e ku hûn bi vê projeyê dest pê bikin, gelek alîkarî hene bi taybetî dema ku em bi tîmek dest pê dikin. Ew gelek rêbazên baş hene û hêsan e ku meriv lênihêrî. Ew jî hêsan e ku meriv berfireh bike û taybetmendiyên nû lê zêde bike. Em dikarin rêbernameyê bişopînin da ku pêkhateyek nû biafirînin an jî CLI ya xwe binivîsin da ku pêvajoyê otomatîk bikin.

Hemû cureyên linting û formatkirinê berê hatine saz kirin. Em dikarin konfigurasyona VS Code jî bikar bînin da ku ew hêsantir bibe ku meriv bi projeyê re bixebite. Ew her weha konfigurasyona Storybook heye ku em dikarin bikar bînin da ku pêkhateyên xwe ava bikin. Ev şablon hook-a commit-msg heye ku em dikarin bikar bînin da ku peyama commitê xwe lint bikin. Em dikarin bi hêsanî pêkhateya xwe belge bikin bi bikaranîna Storybook.

Depo: alexeagleson/nextjs-fullstack-app-template Blog: Çawa Mîmariya Berfireh Ji Bo Projeya Xwe ya Next.js Ava Bikin

Next.js Şablon ji hêla ipenywis

Wî di vîdyoya xwe ya ravekirina vê şablonê de got, ev Danîna Projeya React Ya Pêşerojê Ye Ku We Weke Pêşdevera Nû Pêwîst e. Hûn dikarin bi hêsanî mîmariyek wekî Pêşdevanê Pêşketî biafirînin.

Di cîhana pêşkeftina webê ya îroyîn de ku bi lez û bez pêş dikeve, girîng e ku hûn amûr û çarçoveyên rast di destê xwe de hebin. Ew derê ye ku serîlêdana Next.js bi Turborepo, Zustand, TailwindCSS, û tîma TypeScript tê de - tevliheviyek hêzdar a teknolojîyên herî nû yên ku dikarin pêvajoya pêşkeftina we hêsantir, zûtir, û bi bandortir bikin.

Yek ji sûdên sereke yên vê tîmê Next.js ye, çarçoveyek pêşeng ji bo avakirina serîlêdanên React yên ku li ser serverê têne pêşkêş kirin. Ew parvekirina koda otomatîk, performansa çêtir, û danîna hêsan pêşkêş dike, ew hilbijartina îdeal e ji bo pêşdevanên ku dixwazin li ser avakirina serîlêdanên webê yên berbiçav û berfireh bisekinin bêyî ku ew li ser binesaziya bingehîn xemgîn bibin.

Turborepo amûrek din e ku dikare bi bandor pêvajoya we baştir bike bi optimîzekirina pêşkeftina monorepo. Ew destûrê dide pêşdevanan ku bi pakêtên pirjimar di nava depoyek yekane de bixebitin, dem û enerjiyê bi hev re bidin hev û ew hêsantir e ku meriv kodê xwe birêve bibe û lênihêrî.

Zustand pirtûkxaneyek birêvebirina dewletê ya sivik e ku rêbazek hêsan û bêalî pêşkêş dike ji bo birêvebirina dewletê di serîlêdanên React de. Ew dikare bibe alîkar ku hûn kodê xwe paqij û rêxistinî bihêlin û di heman demê de ew hêsan e ku meriv bi dewleta serîlêdana xwe re bixebite û ew nû bike.

TailwindCSS çarçoveyek CSS ya utility-first e ku dikare bibe alîkar ku hûn bi hêsanî interfaceyên bikarhêner yên bersivdayî û kesane biafirînin. Bi pola utility yên bêalî û vebijarkên kesane yên nermal, hûn dikarin dîzaynên ecêb biafirînin ku li ser her cîhaz an pîvana ekranê baş xuya dikin.

Di dawiyê de, TypeScript nivîsandina statîk lê zêde dike li ziman, ew ewlehiya celebê çêtir û ezmûna pêşdevanan pêşkêş dike. Ev dikare bibe alîkar ku hûn di destpêkê de xeletiyan bigirin û pê ewle bibin ku kodê we paqij û rêxistinî ye.

Bi giştî, serîlêdana Next.js bi Turborepo, Zustand, TailwindCSS, û tîma TypeScript, hilbijartina hêzdar û modern e ji bo her pêşdevanek ku dixwaze serîlêdanên webê yên herî nû biafirîne. Her çend dibe ku hinekî hinekî xwendin hebe jî, sûdê wê hêjayê hewldanê ye, di nav de demên pêşkeftinê yên zûtir, performansa çêtir, û lênihêrîna hêsantir a kodan. Ji ber vê yekê çima ceribandinê nakin û xwe bi xwe nabînin?

Bi tenê ceribandinê bikin, ew bi rastî baş e. Hêsan e ku meriv berfireh bike û lênihêrî.

Depo: ipenywis/your-react-boilerplate Youtube: Danîna Projeya React Ya Pêşerojê Ye Ku We Weke Pêşdevera Nû Pêwîst e

Next.js Şablon ji hêla T3

Create T3 App (CT3A) kîteyek destpêkek e ji bo avakirina serîlêdanên webê bi karanîna komek taybetî ya teknolojîyên modern ku tîma T3 pêk tîne. Tîma T3 ji TypeScript, tRPC, û TailwindCSS pêk tê. CT3A vê tîmê digire û teknolojîyên din jî lê zêde dike da ku platformek hêzdar û hêsan-bikaranîn biafirîne ji bo avakirina serîlêdanên webê.

Yek ji taybetmendiyên derketinên CT3A bikaranîna TypeScript e. Afirînerên CT3A bawer dikin ku TypeScript ezmûnek bêtir lihevhatî û kêfxweştir pêşkêş dike ji Javascriptê ya sade, bi taybetî ji bo pêşdevanên ku nû di pêşkeftina webê de ne. Bi TypeScript, pêşdevan di dema nivîsandina kodê de bersivdayîna zindî werdigirin, ev yek dibe alîkar ku xeletiyan pêşî lê bigire û di dirêj demê de demê xwe bidin hev.

Teknolojîyek din a sereke ku di CT3A de tê bikar anîn Next.js ye, çarçoveyek webê ya populer ji bo avakirina serîlêdanên bingehîn li ser React. Next.js rêbazek nermal-bîra û pir optîmîze pêşkêş dike ji bo afirandina serîlêdanan, ev yek dibe alîkar ku pêşdevan di dema avakirina serîlêdanên xwe de biryarên baş bidin.

CT3A her weha tRPC bikar tîne, alternatîfek ji bo GraphQL ku ezmûneke pêşkeftina xerîdar a bêkêmasî pêşkêş dike li hember serverek bi celebê ewle, bêyî hemû şablonan. Bi karanîna TypeScript, tRPC ezmûneke pêşdevan a ecêb pêşkêş dike ku hêsan e ku meriv bikar bîne û pir bi bandor e.

Ji bilî van teknolojîyên bingehîn, CT3A gelek teknolojîyên din jî tê de hene ku bi gelemperî di pêşkeftina webê de têne bikar anîn. Di nav wan de Prisma heye, ew ewlehiya celebê ji bingehê daneyê heta serîlêdanê pêşkêş dike û komek amûr pêşkêş dike da ku têkiliyên rojane bi bingehê daneyê re hêsantir bikin. CT3A her weha Tailwind CSS bikar tîne, çarçoveyek CSS ya utility-first ya populer ku ew hêsan dike ku meriv serîlêdanên bi çavê xweş biafirîne bêyî ku li ser navkirina polan an rêxistinkirina pelan xemgîn bibe. Di dawiyê de, CT3A NextAuth.js tê de heye, çareseriyek ji bo anîna pejirandin û ewlehî li serîlêdana Next.js ya we bêyî ku hûn wê bi destê xwe ava bikin.

Bi giştî, Create T3 App xalek baş ji bo her kesê ye ku dixwaze serîlêdanên webê yên modern biafirîne bi karanîna komek teknolojîyên hêzdar û hêsan-bikaranîn. Bi TypeScript, Next.js, tRPC, Prisma, Tailwind CSS, û NextAuth.js, CT3A platformek berfireh û pir bi bandor pêşkêş dike ji bo avakirina serîlêdanên webê yên modern. Heke hûn dixwazin serîlêdanên webê bi teknolojîyên herî nû û rêbazên baş biafirînin, CT3A bi rastî hêjayî ceribandinê ye.

Girêdan: Create T3 App

Encam

Ev hemû ji bo îro ne. Hêvîdar im ku hûn vê gotarê bikêr bibînin. Heke hûn pirs an pêşniyarên we hene, ji kerema xwe di beşa şîroveya jêrîn de ji min re bêjin. Spas ji bo xwendinê.