Nextjs for alle - med grundlæggende viden om React

Med nogle grundlæggende React- og JavaScript-viden er du på vej

Next.js er en JavaScript-ramme oprettet af Zeit. Det giver dig mulighed for at oprette server-rendering og statiske webapplikationer ved hjælp af React. Det er et godt værktøj til at opbygge dit næste websted. Det har mange gode funktioner og fordele, som kan gøre Nextjs til din første mulighed for at opbygge din næste webapplikation.

Du har ikke brug for nogen konfiguration af webpack eller lignende for at begynde at bruge Next.js. Det kommer med sin konfiguration. Alt hvad du behøver er at køre npm run devog begynde at opbygge din applikation?.

I denne artikel vil vi udforske de fantastiske funktioner og tricks i Next.js, og hvordan man begynder at opbygge dit næste websted med det.

Dette indlæg forudsætter, at du har en vis grundlæggende viden om React og JavaScript.

Her er nogle gode hjemmesider bygget med Next.js:

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

Jeg brugte endda Nextjs til at opbygge min personlige hjemmeside saidhayani.me - du kan få kildekoden på GitHub her.

Kom godt i gang med Next.js

For at starte med Next.js skal du have node.js installeret på din maskine, og det er alt. Next.js er som ethvert andet node.js-program - du har brug for npm eller garn for at installere afhængigheder.

Lad os komme i gang og oprette et Next.js-projekt.

Først skal vi oprette en mappe og give den et navn efter eget valg. Jeg hedder det nextjs-app.

Du kan nemt gøre det med denne kommandolinje:

mkdir nextjs-app

Når du har oprettet mappen nextjs-app, skal du åbne den på terminalen. Kør for npm init at oprette package.json filen.

Dernæst skal vi installere vores afhængigheder.

Installation af Next.js

  • ved hjælp af Garn, skriv
yarn add next
  • ved hjælp af npm, skriv:
npm i next --save

Derefter skal vi installere React, fordi Next.js bruger React. Den første linje nedenfor bruger Garn til installationen.

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

Derefter skal du oprette to nødvendige mapper: pagesog static. Next.js fungerer ikke uden dem !!

mkdir pages static

Du skal have denne struktur efter at have kørt disse kommandoer:

nextjs-app -pages -static -package.json

Og så kan du bare køre npm next devog derefter åbne //localhost:3000/ i din browser.

Den NotFoundside vil dukke op, fordi vi endnu ikke har nogen side!

Så lad os oprette en homeside og et indgangspunkt index.js.

touch index.js home.js

Og så kan du skrive en normal React-komponent. Som jeg sagde ovenfor, er Next.js til opbygning af React-applikationer.

Sådan home.jsser vores ud:

Og her er vores index.jsfil:

Next.js har en live genindlæsningsfunktion. Alt hvad du skal gøre er bare at ændre og gemme, og Next.js vil automatisk kompilere og genindlæse appen for dig.

Bemærk : Next.js er som ethvert andet gengivelsesværktøj på serversiden, vi har brug for for at definere standardsiden for vores applikation, i vores tilfælde er det index.js.

Du vil se denne ændring i browseren efter kørsel npm next dev:

Tillykke! Vi oprettede netop en Next.js-app med et par enkle trin. Disse instruktioner til oprettelse af en Next.js-app er beskrevet i de officielle dokumenter på Next.js.

Mit alternativ

Jeg bruger normalt ikke denne måde. Jeg bruger i stedet CLI-oprette-næste-appen, der vil gøre alt dette for mig i en enkelt linje.

npx create-next-app my-app

Du kan tjekke dokumentationen her for at udforske flere funktioner.

Opret brugerdefinerede konfigurationer til Next.js

Nogle gange vil du måske tilføje nogle yderligere afhængigheder eller pakker til din Next.js-app.

Next.js giver dig mulighed for at tilpasse din konfiguration ved hjælp af en next-config.jsfil.

For eksempel vil du muligvis tilføje sass-support til din app. I dette tilfælde skal du bruge pakken med næste sass, og du skal tilføje den til next-config.jsfilen som i eksemplet nedenfor:

Først skal du installere next-sass:

yarn add @zeit/next-sass

Medtag det derefter i next-config.jsfilen:

Og så kan du oprette skrive din sass-kode og importere den i din komponent:

Import af sass-filen i vores komponent:

Og her er resultatet:

Wow, var det ikke så let at tilføje sass-support til Next.js-appen?

På dette tidspunkt dækkede vi netop installations- og konfigurationsdelen. Lad os nu tale om funktionerne i Next.js!

Funktionerne

Next.js kommer med en masse gode funktioner som gengivelse på serversiden, routere og doven indlæsning.

Gengivelse på serversiden

Next.js udfører rendering på serversiden som standard. Dette gør din applikation optimeret til søgemaskiner. Du kan også integrere enhver middleware såsom express.js eller Hapi.js, og du kan køre enhver database, såsom MongoDB eller MySQL.

Apropos søgemaskineoptimering kommer Next.js med en Headkomponent, der giver dig mulighed for at tilføje og oprette dynamiske metatags. Det er min yndlingsfunktion - du kan lave brugerdefinerede og dynamiske metatags. Disse gør, at dit websted kan indekseres af søgemaskiner som Google. Her er et eksempel på en Headkomponent:

Og du kan importere og bruge Headkomponenten på en hvilken som helst anden side:

Fantastisk!

Bemærk : Med Next.js behøver du ikke importere React, fordi Next.js gør dette for dig.

Generering af et statisk websted med Next.js

Foruden gengivelse på serversiden kan du stadig kompilere og eksportere din applikation som et statisk HTML-websted og distribuere det på et statisk webhosting som en GitHub-side eller netlify. Du kan lære mere om, hvordan du laver et statisk websted med Next.js her i de officielle dokumenter.

Routere

Dette er endnu en af ​​de fantastiske funktioner i Next.js. Når du bruger create-react-appen, skal du normalt installere react-router og oprette dens brugerdefinerede konfiguration.

Next.js kommer med sine egne routere med nul konfigurationer. Du har ikke brug for nogen ekstra konfiguration af dine routere. Opret bare din side inde i pagesmappen, og Next.js tager sig af al routingkonfiguration.

Lad os gå videre og oprette en brugerdefineret navigation for at gøre alt klart!

For at navigere mellem sider har Next.js Linkmetoden til at styre navigationen.

Lad os oprette blog.jsog contact.jssider:

blog.js

Og her er contact.jssiden:

Og nu skal vi være i stand til at navigere mellem disse sider?

Wow det så let og super fantastisk.

Lazy loading

Lazy loading gør din applikation til en bedre brugeroplevelse. Nogle gange kan det tage tid at indlæse siden. Brugeren kan opgive din app, hvis indlæsningen tager mere end 30 sekunder.

Måden at undgå dette er at bruge et trick til at indikere for brugeren, at siden indlæses, for eksempel ved at vise en spinner. Lazy loading eller kodedeling er en af ​​de funktioner, der giver dig mulighed for at håndtere og kontrollere langsom indlæsning, så du kun indlæser den nødvendige kode på din side.

Next.js leveres med sin egen kodeopdelingsmetode. Det giver os en metode, kaldet dynamic, til at indlæse vores komponent, som i eksemplet nedenfor:

Du kan finde kildekoden til disse eksempler på GitHub

Det er alt. Jeg håber, det er nok, og jeg håber, at denne artikel giver dig en klar idé om Next.js og dens funktioner. Du kan lære mere om andre funktioner i de officielle dokumenter.

Hvis du har andre tilføjelser til dette indlæg, kan du efterlade en kommentar nedenfor, og hvis du kan lide dette indlæg, skal du trykke på klapp? og del.

Diskuter på Twitter ?.

Forresten har jeg for nylig arbejdet med en stærk gruppe softwareingeniører til en af ​​mine mobilapplikationer. Organisationen var fantastisk, og produktet blev leveret meget hurtigt, meget hurtigere end andre firmaer og freelancere, jeg har arbejdet med, og jeg tror, ​​jeg kan ærligt anbefale dem til andre projekter derude. Skyd mig en e-mail, hvis du vil kontakte - [email protected]