Noțiuni de bază cu o nouă aplicație React este mai ușor ca niciodată cu cadre precum Next.js. Dar aceste cadre nu includ întotdeauna toate instrumentele pe care doriți să le utilizați.

Cum putem folosi Starters pentru a deveni super productivi atunci când începem un nou proiect cu instrumentele noastre preferate?

  • Ce este Next.js?
  • Ce este un Starter?
  • Ce vom construi?
  • Adăugarea Sass la un Starter Next.js
  • Configurarea documentației Next.js Starter pentru configurare ușoară
  • Alte lucruri de luat în considerare

Ce este Next.js?

Next.js este un cadru de aplicații de la Vercel care vă permite să porniți rapid un nou Reacţiona cerere.

Unele caracteristici de bază includ crearea pagini și preluarea datelorși vă permit să generați un site static sau să utilizați redarea pe partea de server pentru a încărca dinamic aplicația.

În plus, puteți profita de caracteristicile sale avansate, cum ar fi Rutare sau crearea unui API chiar lângă interfața dvs. de utilizare.

Ce este un Starter?

Starterele sunt practic un depozit git sub forma unui șablon care vă permite să creați cu ușurință o aplicație preconfigurată.

Nu este neapărat ceva special la un Starter. În esență, este o aplicație Next.js care a fost deja configurată într-un mod specific și generalizată în general, astfel încât oricine să o poată utiliza.

De exemplu, dacă aveți tendința de a construi o mulțime de aplicații în același mod de fiecare dată, poate fi necesar să repetați aceiași pași de configurare de fiecare dată când creați o aplicație nouă.

În schimb, puteți crea un Starter de unde veți începe proiectele – și va elimina necesitatea de a repeta primii pași de fiecare dată.

Ce vom construi?

Vom construi un Starter de bază Next.js care vă va permite să creați rapid și ușor un nou proiect cu acel Starter ca punct de plecare.

Deși nu vom trece prea mult la caracteristici, deoarece scopul aici este să aflăm despre Starters, vom testa acest lucru adăugând Sass la Next.js, astfel încât cineva să poată începe cu ușurință cu superputerile CSS.

Puteți verifica Incepator pe GitHub: github.com/colbyfayock/next-sass-starter.

Crearea unui nou Starter Next.js

Pentru a începe cu crearea unui Starter, trebuie să începem cu o aplicație Next.js.

Putem face acest lucru executând următoarea comandă în orice director doriți să creați acest lucru:

yarn create next-app
# or
npx create-next-app

După ce rulați acest lucru, Next.js vă va cere un nume de proiect. În timp ce puteți utiliza orice doriți, Next.js Starters au de obicei un model de nume de next-[name]-starter.

Deci, pentru că creăm un Sass Starter, aș putea să-l numesc next-sass-starter.

Cum sa creati un starter Nextjs pentru a porni cu
Noua aplicație Next.js din terminal

Odată ce Next.js a instalat toate dependențele noastre, veți fi gata să navigați la acel folder și să rulați comanda pentru a porni serverul de dezvoltare.

yarn dev
# or
npm run dev

Și odată ce serverul de dezvoltare pornește, ar trebui să fim gata să plecăm!

1611317107 341 Cum sa creati un starter Nextjs pentru a porni cu
Noua aplicație Next.js în browser

În acest moment, avem destul de mult un Starter de bază. Așa cum am menționat anterior, nu există prea multe lucruri care să fie de fapt speciale cu un Start.js Starter. Deci, dacă am împinge acest lucru până la Github, am putea începe imediat să-l folosim „așa cum este”.

Puteți testa acest lucru executând următoarele:

yarn create next-app [project-name] -e [GitHub URL]
# or
npx create-next-app [project-name] -e [GitHub URL]

După ce ați rulat acest lucru, ar trebui să fiți configurat cu un nou director care are un proiect creat din Starter cu toate dependențele instalate.

Dar vrem să facem mai mult decât atât. Scopul nostru este să adăugăm funcții care ajută la pornirea unei aplicații cu mai mult decât implicit, așa că hai să adăugăm Sass.

Urmați împreună cu comiterea!

Adăugarea Sass la un Starter Next.js

Notă: Pentru exemplul nostru, vom crea un starter Sass așa cum s-ar putea să fi sugerat și numele de mai sus. Simțiți-vă liber să adăugați orice caracteristici dorite în acest moment, indiferent dacă include sau nu Sass.

Amintiți-vă – obiectivul de aici va fi de a oferi ceva pe care îl vom putea folosi atunci când vom crea un nou proiect cu acest Starter.

Apoi, vrem să adăugăm Sass la proiectul nostru. Pentru a începe, dorim să instalăm sass ca dependență:

yarn add sass
# or
npm install sass

În continuare, deoarece Next.js caută deja .scss ca extensie de fișier, putem pur și simplu actualiza două fișiere CSS sub styles director către .scss.

Deci, schimbați următoarele fișiere:

styles/globals.css => styles/globals.scss
styles/Home.module.css => styles/Home.module.scss

Apoi, trebuie să configurăm declarațiile noastre de import pentru a recunoaște noile noastre extensii de fișiere.

În pages/_app.js, actualizați importul de stiluri din partea de sus la:

import '../styles/globals.scss'

Si in pages/index.js, actualizați importul stilurilor în:

import styles from '../styles/Home.module.scss'

În acest moment, vă puteți porni serverul de dezvoltare și ar trebui să vedem în continuare pagina Next.js implicită.

1611317107 341 Cum sa creati un starter Nextjs pentru a porni cu
Aplicația Next.js ar trebui să arate la fel

Pentru a vedea Sass-ul în acțiune, putem actualiza unele dintre clasele noastre pentru a utiliza stiluri imbricate în loc de selectoare individuale.

Actualizați toate fișierele .footer selectoare din interiorul styles/Home.module.scss la următoarele:

.footer {

  width: 100%;
  height: 100px;
  border-top: 1px solid #eaeaea;
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    margin-left: 0.5rem;
  }

  a {
    display: flex;
    justify-content: center;
    align-items: center;
  }

}

Puteți utiliza aceeași structură de cuibărire pentru a actualiza .title și .card.

De asemenea, putem adăuga următoarele în partea de sus a noastră styles/Home.module.css fişier:

$color-primary: #0070f3;

Și actualizați toate instanțele culorii din acel fișier de la #0070f3 la $color-primary:

.title {
  ...
  a {
    color: $color-primary;

Dacă reîncărcați pagina, nimic nu se va schimba. Dar actualizați variabila la culoarea preferată, cum ar fi:

$color-primary: blueviolet;

Și acum toate culorile se schimbă.

1611317107 367 Cum sa creati un starter Nextjs pentru a porni cu
Culori actualizate în aplicația Next.js

În cele din urmă, deoarece avem acum un starter Sass, să actualizăm titlul paginii. Înlocuiți „Bun venit la Next.js!” În pages/index.js la:

<h1 className={styles.title}>
  <a href="https://nextjs.org">Next.js</a> Sass Starter
</h1>

Și acum avem un punct de plecare Sass!

1611317107 499 Cum sa creati un starter Nextjs pentru a porni cu
Titlu actualizat în aplicația Next.js

La fel ca înainte, puteți testa acest lucru creând un nou proiect cu starter-ul dvs. după ce toate modificările sunt pe GitHub.

yarn create next-app [project-name] -e [GitHub URL]
# or
npx create-next-app [project-name] -e [GitHub URL]

Urmați împreună cu comiterea!

Configurarea documentației Next.js Starter pentru configurare ușoară

Probabil că unul dintre cele mai importante lucruri despre un Starter este documentarea.

S-ar putea să nu fie la fel de important dacă folosiți acest lucru numai dvs. Dar dacă vrei ca alți oameni să-l folosească, vrei să știe cum să-l folosească, altfel se vor bloca și vor deveni frustrați.

Cea mai importantă parte este configurarea Starter-ului. Configurarea Starter-ului într-o repo GitHub este un prim pas minunat. Dar dacă cineva dorește să utilizeze acel Starter, va trebui să cloneze sau să descarce repo-ul respectiv și apoi să elimine istoricul git.

În schimb, puteți adăuga comanda pe care am folosit-o mai sus în README.me fișier pentru a oferi utilizatorilor instrucțiuni despre cum să înceapă rapid, cum ar fi:

## Getting Started

Run the following command to create a new project with this Starter:

```
yarn create next-app [project-name] -e https://github.com...
# or
npx create-next-app [project-name] -e https://github.com...
```

Acest lucru va împiedica blocarea persoanelor care ar putea să nu înțeleagă cum să facă unele dintre aceste lucruri manual.

De asemenea, este important să adăugați orice documentație despre opțiunile de configurare pe care le-ați adăugat.

Dacă adăugați câteva variabile care vă permit să modificați unele caracteristici la nivel de site, asigurați-vă că adăugați note despre acestea.

În cele din urmă, doriți ca oamenii să înțeleagă cum să folosească funcțiile pe care le-ați adăugat pentru a le ușura viața. Dacă nu-l înțeleg, ar putea să scoată codul și să-l facă manual.

În cele din urmă, crearea și publicarea unui Starter înseamnă simplificarea vieții oamenilor. Indiferent dacă vă întoarceți la Starter câteva luni mai târziu sau o mulțime de oameni noi care doresc să devină productivi, le oferiți o experiență de dezvoltator mai bună adăugând o documentație bună.

Alte lucruri de luat în considerare

Generalizarea caracteristicilor și adăugarea configurației pentru un Starter Next.js

Adăugarea de funcții este o modalitate excelentă de a face un Starter mai probabil să fie utilizat. Dacă aș folosi un Starter pentru a crea un nou blog, mi-ar plăcea dacă acel Starter să includă numele meu ca autor și poate chiar o pagină Despre mine.

Dar ceea ce nu mi-aș dori este să trebuiască să înlocuiesc numele altcuiva de 100 de ori în cod pentru a-mi actualiza propriul proiect. Ca să nu mai vorbim, văzând acest nume pe Starter, m-ar putea face să simt mai mult că este blogul lor, mai degrabă decât un șablon pe care îl pot folosi pentru proiectul meu.

Luați în considerare pornirea prin utilizarea unui nume generalizat pe tot parcursul proiectului. În loc să utilizați Blogul lui Colby Fayock pe întregul Starter, faceți-l Blogul meu, care îl va face să se simtă mai puțin personal pentru creator pentru persoana care utilizează Starter.

Adăugați și câteva opțiuni de configurare. Este mult mai ușor să pot actualiza o singură variabilă care ar face ca proiectul meu să includă Colby Fayock în loc de Blogul meu decât să cauți toate fișierele pentru a face această schimbare manual.

Alegeți cu atenție unde să fiți opiniați

Când utilizați un instrument precum Sass, există mai multe modalități de a utiliza acel instrument. Dacă configurați o structură de proiect incredibil de specifică și avizată, înstrăinați oamenii folosind Starterul dvs.

Fie îi va forța să refacă întregul proiect, fie îi va face să dorească să șteargă o grămadă de coduri care ar putea să-i facă să evite să-l folosească în viitor.

Puteți crea Starters cu opinie, dar alegeți cu înțelepciune unde introduceți aceste opinii. Acest lucru vă va face munca utilizabilă de un grup mai mare de oameni care doresc să fie productivi.

Dacă doriți să creați ceva foarte avizat, luați în considerare denumirea acestuia altceva și utilizarea instrumentului ca parte a numelui. De exemplu, aș putea crea un Sass Starter cu opinii numit Colby’s Sassy Next.js Starter.

Ați creat un nou Starter?

Distribuiți cu mine pe Twitter!