Nextjs pre každého - so základnými znalosťami React

S niektorými základnými znalosťami reagovania a JavaScriptu budete na dobrej ceste

Next.js je rámec JavaScript vytvorený spoločnosťou Zeit. Umožňuje vám vytvárať vykresľovanie na strane servera a statické webové aplikácie pomocou aplikácie React. Je to skvelý nástroj na vytvorenie vašej ďalšej webovej stránky. Má veľa skvelých funkcií a výhod, vďaka ktorým môže byť Nextjs vašou prvou voľbou pre zostavenie vašej ďalšej webovej aplikácie.

Na to, aby ste mohli začať používať Next.js., nepotrebujete žiadnu konfiguráciu webpacku a podobne. Dodáva sa s jeho konfiguráciou. Všetko, čo potrebujete, je spustiť npm run deva začať vytvárať aplikáciu?.

V tomto článku sa budeme zaoberať skvelými funkciami a trikmi súboru Next.js a tým, ako s ním začať budovať ďalší web.

Tento príspevok predpokladá, že máte základné znalosti jazykov React a JavaScript.

Tu sú niektoré skvelé webové stránky vytvorené pomocou súboru Next.js:

  • Syntaxt.fm
  • npmjs
  • material-ui.io
  • expo.io
  • codemenitor.io

Dokonca som použil program Nextjs na vytvorenie mojej osobnej webovej stránky saidhayani.me - zdrojový kód na serveri GitHub nájdete tu.

Začíname s produktom Next.js

Ak chcete začať s programom Next.js, musíte mať vo svojom počítači nainštalovaný node.js a to je všetko. Next.js je ako každá iná aplikácia node.js - na inštaláciu závislostí potrebujete npm alebo Yarn.

Začnime a vytvorme si projekt Next.js.

Najskôr musíme vytvoriť priečinok a pomenovať ho podľa vlastného výberu. Poviem to nextjs-app.

Môžete to ľahko urobiť pomocou tohto príkazového riadku:

mkdir nextjs-app

Po vytvorení priečinka nextjs-app ho otvorte na termináli. Spustením npm init vytvorte package.json súbor.

Ďalej si musíme nainštalovať naše závislosti.

Inštalácia súboru Next.js

  • pomocou priadze napíš
yarn add next
  • pomocou npm zadajte:
npm i next --save

Potom musíme nainštalovať React, pretože Next.js používa React. Prvý riadok nižšie používa na inštaláciu priadzu.

yarn add react react-dom
// with npm
npm i react react-dom --save

Potom musíte vytvoriť dva potrebné priečinky: pagesa static. Next.js bez nich nebude fungovať !!

mkdir pages static

Vám musí mať túto štruktúru Po spustení týchto príkazov:

nextjs-app -pages -static -package.json

A potom jednoducho môžete spustiť npm next deva potom otvoriť //localhost:3000/ vo svojom prehliadači.

NotFoundStrana sa objaví, pretože nemáme žiadnu stránku ešte!

Vytvorme teda homestránku a vstupný bod index.js.

touch index.js home.js

A potom môžete napísať normálny komponent React. Ako som už uviedol vyššie, Next.js slúži na vytváranie aplikácií React.

Takto home.jsvyzerá náš vzhľad:

A tu je náš index.jssúbor:

Next.js má funkciu živého načítania. Všetko, čo musíte urobiť, je iba zmeniť a uložiť. Aplikácia Next.js za vás aplikáciu automaticky zostaví a znovu načíta.

Poznámka : Next.js je ako každý iný nástroj na vykresľovanie na strane servera, ktorý musíme v našom prípade definovať ako predvolenú stránku našej aplikácie index.js.

Túto zmenu uvidíte v prehliadači po spustení npm next dev:

Blahoželáme! Práve sme vytvorili aplikáciu Next.js s niekoľkými jednoduchými krokmi. Tieto pokyny na vytvorenie aplikácie Next.js sú popísané v oficiálnych dokumentoch aplikácie Next.js.

Moja alternatíva

Väčšinou nepoužívam tento spôsob. Namiesto toho používam rozhranie CLI create-next-app, ktoré za mňa urobí všetky tieto veci v jednom riadku.

npx create-next-app my-app

Tu si môžete pozrieť dokumentáciu a preskúmať ďalšie funkcie.

Vytvorte si vlastné konfigurácie pre Next.js

Niekedy možno budete chcieť do aplikácie Next.js pridať nejaké ďalšie závislosti alebo balíčky.

Next.js vám dáva možnosť prispôsobiť si konfiguráciu pomocou next-config.jssúboru.

Možno budete chcieť do svojej aplikácie pridať podporu Sass. V takom prípade musíte použiť balík next-sass a musíte ho pridať do next-config.jssúboru, ako je uvedené v príklade nižšie:

Najskôr nainštalujte next-sass:

yarn add @zeit/next-sass

Potom ho zahrňte do next-config.jssúboru:

Potom môžete vytvoriť napísať svoj kód Sass a importovať ho do svojej súčasti:

Import súboru Sass do našej súčasti:

A tu je výsledok:

Páni, nebolo také ľahké pridať do aplikácie Next.js podporu sass?

V tomto bode sme sa zaoberali iba inštalačnou a konfiguračnou časťou. Teraz si povieme niečo o vlastnostiach Next.js!

Funkcie

Next.js prichádza s množstvom skvelých funkcií, ako je vykresľovanie na strane servera, smerovače a lenivé načítanie.

Vykreslenie na strane servera

Next.js štandardne vykonáva vykreslenie na strane servera. Vďaka tomu je vaša aplikácia optimalizovaná pre vyhľadávače. Môžete tiež integrovať akýkoľvek middleware, napríklad express.js alebo Hapi.js, a môžete spustiť ľubovoľnú databázu, napríklad MongoDB alebo MySQL.

Keď už hovoríme o optimalizácii vyhľadávacieho modulu, Next.js prichádza s Headkomponentom, ktorý vám umožňuje pridávať a vytvárať dynamické metaznačky. Je to moja obľúbená funkcia - môžete si vytvoriť vlastné a dynamické metaznačky. Vďaka tomu môžu byť vaše webové stránky indexované vyhľadávacími nástrojmi, ako je Google. Tu je príklad Headsúčasti:

A Headkomponent môžete importovať a použiť na ktorejkoľvek inej stránke:

Úžasné!

Poznámka : S Next.js nemusíte importovať React, pretože Next.js to robí za vás.

Generovanie statického webu pomocou súboru Next.js

Okrem vykresľovania na strane servera môžete svoju aplikáciu zostaviť a exportovať ako statický web HTML a nasadiť ho na statický web hostený ako stránka GitHub alebo netlify. Viac informácií o tom, ako vytvoriť statický web pomocou súboru Next.js, sa dozviete tu v oficiálnych dokumentoch.

Routery

Toto je ďalšia z vynikajúcich funkcií súboru Next.js. Keď používate aplikáciu create-react, musíte si zvyčajne nainštalovať reagujúci router a vytvoriť jeho vlastnú konfiguráciu.

Next.js prichádza s vlastnými smerovačmi s nulovou konfiguráciou. Nepotrebujete žiadnu ďalšiu konfiguráciu svojich smerovačov. Stačí vytvoriť svoju stránku v pagespriečinku a súbor Next.js sa postará o všetky konfigurácie smerovania.

Poďme do toho a vytvorme si vlastnú navigáciu, aby bolo všetko jasné!

Na navigáciu medzi stránkami má Next.js Linkspôsob správy navigácie.

Poďme vytvoriť blog.jsa contact.jsstránky:

blog.js

A tu je contact.jsstránka:

A teraz musíme byť schopní navigovať medzi týmito stránkami?

Páni, také ľahké a super úžasné.

Lenivé načítanie

Vďaka lenivému načítaniu bude vaša aplikácia poskytovať lepší dojem používateľa. Načítanie stránky môže niekedy trvať nejaký čas. Používateľ môže vašu aplikáciu opustiť, ak načítanie trvá viac ako 30 sekúnd.

Tomu sa dá vyhnúť tak, že pomocou nejakého triku informujete používateľa, že sa stránka načítava, napríklad zobrazením číselníka. Lenivé načítanie alebo rozdelenie kódu je jednou z funkcií, ktoré vám umožňujú zvládnuť a riadiť pomalé načítanie, aby ste na svoju stránku načítali iba potrebný kód.

Next.js prichádza s vlastnou metódou rozdelenia kódu. Poskytuje nám metódu nazývanú dynamicnačítanie našej súčasti, ako v príklade nižšie:

Zdrojový kód týchto príkladov nájdete na GitHub

To je všetko. Dúfam, že to stačí a dúfam, že vám tento článok poskytne jasnú predstavu o súbore Next.js a jeho funkciách. Ďalšie informácie o ďalších funkciách sa dozviete v oficiálnych dokumentoch.

Ak máte k tomuto príspevku nejaké ďalšie doplnky, môžete zanechať komentár nižšie a ak sa vám tento príspevok páči, stlačte Clap? a zdieľať.

Diskutovať na Twitteri?

Mimochodom, nedávno som spolupracoval so silnou skupinou softvérových inžinierov pre jednu z mojich mobilných aplikácií. Organizácia bola skvelá a produkt bol dodaný veľmi rýchlo, oveľa rýchlejšie ako iné firmy a nezávislí pracovníci, s ktorými som spolupracoval, a myslím si, že ich môžem čestne odporučiť pre ďalšie projekty. Ak sa chcete ozvať, napíšte mi e-mail - [email protected]