Модели арситетураи Next.js 3-и масштабпазир

Next.js - Фреймворки барои сохтани барномаҳои вебӣ

Next.js як фреймворки React аст, ки ба шумо имкон медиҳад барномаҳои React-ро, ки дар сервер рендер карда мешаванд, созед. Ин як воситаи аъло барои сохтани барномаҳои вебӣ аст, аммо метавонад дар ҳоле ки барномаатон калон мешавад, онро мушкил бошад, ки онро ба таври васеътар истифода бурдан мумкин бошад. Дар ин мақола, мо баъзе аз беҳтарин шаблони Next.js барои сохтани барномаҳои вебӣ, ки ба таври васеътар истифода бурдан мумкин аст, менигарем.

Ҷамъияти барномасозони Next.js як қатор шаблони сохтаанд, ки шумо метавонед барои оғози лоиҳаатон истифода баред. Ин шаблони барои сохтани барномаҳои вебӣ, ки ба таври васеътар истифода бурдан мумкин аст, хеле хубанд. Онҳо инчунин ба осонӣ васеъ кардан ва нигоҳ доштан мумкин аст. Дар ин мақола, мо баъзе аз беҳтарин шаблони Next.js барои сохтани барномаҳои вебӣ, ки ба таври васеътар истифода бурдан мумкин аст, менигарем.

Чаро мо ба шаблони ниёз дорем?

Шаблон як намунаи аст, ки шумо метавонед барои оғози лоиҳаи нав истифода баред. Он ҳама файлҳои зарурӣ ва ҷузъҳоро барои оғози кор бо лоиҳа дар бар мегирад. Ин як роҳи аъло барои сарфаи вақт ва кӯшиш ҳангоми оғози лоиҳаи нав аст.

Бо истифода аз шаблони, шумо метавонед дар хусусиятҳои асосии барномаатон диққат диҳед, ба ҷои он ки вақт дар танзими лоиҳа сарф кунед. Инчунин ба шумо кӯмак мекунад, ки беҳтарин амалияҳо ва намунаҳоеро, ки ҷамъият истифода мебарад, риоя кунед.

Барномаи Next.js чӣ гуна ба таври васеътар истифода бурдан мумкин аст?

Барномаи ба таври васеътар истифода бурдан мумкин, барномаест, ки метавонад шумораи зиёди корбарон ва дархостҳоро коркард кунад. Он инчунин ба осонӣ нигоҳ доштан ва васеъ кардан мумкин аст. Муҳим аст, ки аз ибтидо барномаи ба таври васеътар истифода бурдан мумкин сохта шавад, то аз тағир додани рамз баъдтар пешгирӣ карда шавад.

Истифодаи васеътар як омили хеле муҳим ҳангоми сохтани барномаи вебӣ аст. Муҳим аст, ки воситаҳои дуруст ва меъмории дурустро барои сохтани барномаи ба таври васеътар истифода бурдан мумкин интихоб кунед. Мо бояд ҳамеша дар хотир дорем, ки барномаамон дар оянда рушд хоҳад кард, на танҳо ба як партови бефоидае, ки мо дар хазинаи GitHub дафн мекунем, табдил меёбад.

Беҳтарин шаблони барои сохтани барномаҳои Next.js, ки ба таври васеътар истифода бурдан мумкин аст

Шаблонҳои зиёде барои сохтани барномаҳои Next.js, ки ба таври васеътар истифода бурдан мумкин аст, мавҷуданд. Инҳоянд баъзе аз беҳтарин шаблони, ки шумо метавонед барои оғози лоиҳаатон истифода баред.

Next.js Boilerplate аз ҷониби alexeagleson

Ин шаблони як нуқтаи оғози аъло барои сохтани барномаи Next.js аст. Он бо TypeScript сохта шудааст ва аз Next.js 12 истифода мебарад. Он инчунин аз Tailwind CSS барои услуб истифода мебарад. Ин як шаблони аъло барои сохтани барномаи вебӣ аст, ки ба таври васеътар истифода бурдан мумкин аст.

Хусусиятҳои муҳим:

• Next.js 12 (шумо метавонед барои навсозӣ ба Next.js 13 дар хазина кӯмак кунед)

• TypeScript

• Қулфи муҳаррик

• ESLint

• Prettier

• Хуки Git (Husky)

• Танзимоти VS Code

• Нозирии VS Code

• Storybook

• Шаблони ҷузъ

• Санҷиши воридшавӣ

Мо метавонем бо истифода аз фармонҳои зерин ба осонӣ лоиҳаи навро оғоз кунем:

gh repo clone alexeagleson/nextjs-fullstack-app-template
# or
git clone git@github.com:alexeagleson/nextjs-fullstack-app-template.git
# or
git clone https://github.com/alexeagleson/nextjs-fullstack-app-template.git
# or you can also use degit if you want to use the template without git at first

Агар ба шумо TailwindCSS ё ягон чаҳорчӯбаи услубӣ лозим бошад, шумо бояд онро дастӣ насб кунед. Аммо, хуб аст, ки бо ин лоиҳа оғоз кунед, он кӯмаки зиёде дорад, хусусан ҳангоми оғози кор бо як даста. Он амалияҳои хуби зиёде дорад ва нигоҳ доштани он осон аст. Он инчунин ба осонӣ васеъ кардан ва хусусиятҳои нав илова кардан мумкин аст. Мо метавонем дастурномаро барои эҷод кардани ҷузъи нав ё навиштани CLI худамон барои автоматкунонии ин раванд риоя кунем.

Ҳама намуди санҷиш ва форматдиҳӣ аллакай танзим шудаанд. Мо инчунин метавонем аз танзимоти VS Code барои осонтар кардани кор бо лоиҳа истифода барем. Он инчунин танзимоти Storybook-ро дорад, ки мо метавонем барои сохтани ҷузъҳоямон истифода барем. Ин шаблони хуки commit-msg-ро дорад, ки мо метавонем барои санҷиши паёми воридшавии худ истифода барем. Мо метавонем бо истифода аз Storybook ҷузъҳои худро ба осонӣ ҳуҷҷатгузорӣ кунем.

Хазина: alexeagleson/nextjs-fullstack-app-template Blog: Чӣ гуна меъмории ба таври васеътар истифода бурдан мумкинро барои лоиҳаи Next.js-и худ сохтан мумкин аст

Next.js Boilerplate аз ҷониби ipenywis

Вай дар видеои шарҳи худ аз ин шаблони гуфт, ки ин Танзими лоиҳаи React-и Senior-ро, ки шумо ҳамчун барномасози Junior ба он ниёз доред. Шумо метавонед ба осонӣ меъморие ба монанди Senior эҷод кунед.

Дар ҷаҳони зуд суръатгирандаи имрӯзаи таҳияи веб, муҳим аст, ки воситаҳо ва чаҳорчӯбаҳои дурустро дар ихтиёри худ дошта бошед. Ин ҷост, ки барномаи Next.js бо Turborepo, Zustand, TailwindCSS ва чаҳорчӯбаи TypeScript ба кор меояд - як омезиши пурқудрат аз технологияҳои пешрафта, ки метавонад раванди таҳияи шуморо ҳамвортар, зудтар ва самараноктар кунад.

Яке аз фоидаҳои асосии ин чаҳорчӯба Next.js аст, як фреймворки баландпоя барои сохтани барномаҳои React-ро, ки дар сервер рендер карда мешаванд. Он тақсими коди худкор, самаранокии беҳтар ва насби осонро пешниҳод мекунад, ки онро барои барномасозоне, ки мехоҳанд ба сохтани барномаҳои вебӣ, ки қавӣ ва ба таври васеътар истифода бурдан мумкин аст, диққат диҳанд, бе он ки дар бораи сохтори зерини он хавотир шаванд, интихоби мувофиқ месозад.

Turborepo як воситаи дигарест, ки метавонад бо оптимизатсияи таҳияи monorepo, раванди кори шуморо хеле беҳтар кунад. Он ба барномасозон имкон медиҳад, ки бо якчанд баста дар як хазина кор кунанд, ки вақт ва энергияи зиёдеро сарфа мекунад, дар ҳоле ки идора ва нигоҳдории кодатонро осонтар мекунад.

Zustand як китобхонаи сабук барои идоракунии ҳолат аст, ки роҳи содда ва интуитивиро барои идоракунии ҳолат дар барномаҳои React пешниҳод мекунад. Он метавонад ба шумо кӯмак кунад, ки кодатонро тоза ва мураттаб нигоҳ доред, дар ҳоле ки кор кардан ва навсозӣ кардани ҳолати барномаатонро осон мекунад.

TailwindCSS як чаҳорчӯбаи CSS-и utility-first аст, ки метавонад ба шумо дар тарҳрезии интерфейсҳои корбарӣ, ки ба таври васеътар истифода бурдан мумкин аст ва ба осонӣ танзимшаванда аст, кӯмак кунад. Бо синфҳои utility-и интуитивӣ ва имконоти танзими чандир, шумо метавонед тарҳҳои зебоеро эҷод кунед, ки дар ҳама гуна дастгоҳ ё андозаи экран хуб ба назар мерасанд.

Ниҳоят, TypeScript намудҳои статикӣ ба забон илова мекунад, ки амнияти намудҳои беҳтар ва таҷрибаи барномасозиро пешниҳод мекунад. Ин метавонад ба ёфтани хатоҳои барвақтӣ ва боварӣ ҳосил кардан аз он ки кодатон тоза ва мураттаб аст, кӯмак кунад.

Дар маҷмӯъ, барномаи Next.js бо Turborepo, Zustand, TailwindCSS ва чаҳорчӯбаи TypeScript як интихоби пурқудрат ва муосир барои ҳар як барномасозест, ки мехоҳад барномаҳои вебӣ, ки пешрафта мебошанд, созад. Ҳарчанд метавонад як каме курси омӯзиш бошад, фоидаҳо арзиши кӯшишро доранд, аз ҷумла вақти таҳияи зудтар, самаранокии беҳтар ва нигоҳдории осонтари кодаҳо. Пас, чаро санҷиши онро накунед ва худатон набинед?

Танҳо як бор санҷиши онро кунед, ин хеле хуб аст. Он ба осонӣ васеъ кардан ва нигоҳ доштан мумкин аст.

Хазина: ipenywis/your-react-boilerplate Youtube: Танзими лоиҳаи React-и Senior-ро, ки шумо ҳамчун барномасози Junior ба он ниёз доред

Next.js Boilerplate аз ҷониби T3

Create T3 App (CT3A) як маҷмӯаи оғоз барои сохтани барномаҳои вебӣ бо истифода аз як маҷмӯи мушаххаси технологияҳои муосир аст, ки чаҳорчӯбаи T3-ро ташкил медиҳанд. Чаҳорчӯбаи T3 аз TypeScript, tRPC ва TailwindCSS иборат аст. CT3A ин чаҳорчӯбаро мегирад ва технологияҳои иловагиро барои эҷод кардани платформаи пурқудрат ва ба осонӣ истифодашаванда барои сохтани барномаҳои вебӣ илова мекунад.

Яке аз хусусиятҳои барҷастаи CT3A истифодаи TypeScript аст. Эҷодкунандагони CT3A бовар доранд, ки TypeScript таҷрибаи муташаккилтар ва камтар нороҳаткунандаро нисбат ба JavaScript-и оддӣ пешниҳод мекунад, хусусан барои барномасозони нав дар таҳияи веб. Бо TypeScript, барномасозон ҳангоми навиштани код, бозхӯрдии зинда мегиранд, ки ба пешгирии хатоҳо ва сарфаи вақт дар муддати дароз кӯмак мекунад.

Дигар технологияи муҳиме, ки дар CT3A истифода мешавад, Next.js аст, як фреймворки маъмулии веб барои сохтани барномаҳои асоси React. Next.js роҳи сабук ва ба таври васеътар истифода бурдан мумкинро барои эҷод кардани барномаҳо пешниҳод мекунад, ки барои барномасозон осонтар аст, ки ҳангоми сохтани барномаҳои худ қарорҳои хуб гиранд.

CT3A инчунин аз tRPC истифода мебарад, алтернативаи GraphQL, ки таҷрибаи беҳтарини таҳияи мизоҷро дар муқобили сервери typesafe, бе ҳамаи ин намунаҳо, пешниҳод мекунад. Бо истифода аз TypeScript, tRPC таҷрибаи аҷиби барномасозиро пешниҳод мекунад, ки истифодаи он осон аст ва хеле самаранок аст.

Илова ба ин технологияҳои асосӣ, CT3A инчунин якчанд технологияҳои дигареро дар бар мегирад, ки дар таҳияи веб ба таври васеъ истифода мешаванд. Инҳо аз ҷумла Prisma мебошанд, ки беҳтарин амнияти намудро аз пойгоҳи додаҳо то барнома пешниҳод мекунад ва як маҷмӯи воситаҳоро барои осонтар кардани муоширати ҳаррӯза бо пойгоҳи додаҳо пешниҳод мекунад. CT3A инчунин аз Tailwind CSS истифода мебарад, як чаҳорчӯбаи CSS-и маъмулии utility-first, ки сохтани барномаҳои зеборо бидуни нигаронӣ дар бораи номгузорӣ ё ташкили файлҳо осон мекунад. Ниҳоят, CT3A NextAuth.js-ро дар бар мегирад, як ҳалли барои овардани тасдиқ ва амният ба барномаи Next.js-и шумо, бидуни он ки худатон онро созед.

Дар маҷмӯъ, Create T3 App як нуқтаи оғози аъло барои ҳар касест, ки мехоҳад барномаҳои вебӣ муосирро бо истифода аз як маҷмӯаи пурқудрат ва ба осонӣ истифодашаванда аз технологияҳо созад. Бо TypeScript, Next.js, tRPC, Prisma, Tailwind CSS ва NextAuth.js, CT3A як платформаи пурра ва ба таври васеътар истифода бурдан мумкинро барои сохтани барномаҳои вебӣ муосир пешниҳод мекунад. Агар шумо мехоҳед барномаҳои вебӣ бо технологияҳои навтарин ва беҳтарин амалияҳо созед, CT3A албатта арзиши санҷиши онро дорад.

Пайванд: Create T3 App

Хулоса

Ин ҳама барои имрӯз аст. Умедворам, ки ин мақола барои шумо муфид хоҳад буд. Агар ягон савол ё пешниҳод доред, лутфан дар қисмати шарҳи зерин ба ман хабар диҳед. Барои хондани шумо ташаккур.