Innehållsförteckning[Dölj][Visa]
När man väljer ett mjukvarubibliotek eller ramverk tas vanligtvis hänsyn till utvecklarens erfarenhet.
När jag nämner "utvecklarupplevelse" syftar jag på hur utvecklare faktiskt gör jobbet. Utvecklare väljer bibliotek eller ramverk som är trevliga att använda.
Detta är en av de främsta anledningarna till att vi nu har de mest populära biblioteken och ramarna. Som utvecklare behöver vi inte börja om från början när det finns befintliga verktyg skapade för att hjälpa oss med våra uppgifter.
Ramar är mjukvara som skapas och används av utvecklare för att konstruera applikationer, och NextJS är en av dem.
I det här inlägget kommer vi att gå över Nextjs, dess nyckelfunktioner och hur vi kan använda det för att bygga en applikation. Låt oss hoppa direkt in.
Vad är Next.js?
Next.js är ett JavaScript-ramverk för att snabbt och enkelt bygga statiska webbsidor och React-baserade onlineapplikationer. Det låter dig designa fantastiska webbappar för en mängd olika plattformar, inklusive Windows, Linux och Mac.
Du bör vara bekant med Next.js-ramverket om du har minimal förtrogenhet med react och vill lära dig mer om react-ekosystemet.
Även om Next.js kommer med allt du behöver för att komma igång kan du välja mellan NPM och Yarn, JavaScript och TypeScript, CSS och SCSS, statisk export och serverlös distribution.
Funktioner
- Routing görs automatiskt – du behöver inte konfigurera någonting eftersom alla webbadresser är mappade till filsystemet, till filer i pages-mappen (du har förstås anpassningsalternativ).
- Komponenter i en enskild fil – Det är enkelt att lägga till stilar med omfattning till komponenten med styled-jsx, som är helt integrerad och producerad av samma team.
- Ladda om en Hot Code – När Next.js upptäcker en modifiering sparad på disk laddar den om sidan.
- Dynamiska komponenter – Du kan dynamiskt ladda JavaScript-moduler och React-komponenter.
- Statisk export – Next.js låter dig exportera en helt statisk webbplats från din app med nästa exportkommando.
- Kompatibilitet med miljön – Next.js integreras sömlöst med JavaScript-, Node- och React-ekosystemen.
- Dela koder automatiskt – Endast de bibliotek och JavaScript som krävs används för att rendera sidor. Istället för att skapa en enda JavaScript-fil som innehåller all appens kod delar Next.js upp appen intelligent i många resurser.
Hur skapar man en next.js-applikation?
Installation
Du kan använda kommandot node npx för att installera och bygga ett Next.js-projekt.
Detta kommer att generera en mapp och alla filer, konfigurationer och andra objekt som krävs för att köra ett Next.js-projekt.
Du kan starta appen när den har skapats.
Sidor & routing
För att hantera rutter med Next.js behöver vi inte använda ett routingramverk. Routing med Next.js är enkelt att installera. När du använder kommandot create-next-app för att bygga en ny Next.js-app skapar appen som standard en mapp som heter "sidor".
Denna "sidor"-mapp är där du underhåller dina rutter. Som ett resultat kommer varje reaktionskomponentfil i underkatalogen att hanteras som en separat rutt.
Till exempel, om mappen innehåller dessa filer:
- index.js
- about.js
- aricles.js
Den här filen kommer att omvandlas automatiskt på tre sätt:
- Indexsidan localhost/index
- Om sidan localhost/about
- Bloggsidan localhost/artiklar
Ett exempel på en about.js-sida visas nedan. Det finns inget om sidan, som du kan se. Det är helt enkelt en standard funktionell React-komponent.
rutter
För att skapa kapslade rutter måste du först skapa en undermapp. Till exempel: sidor/artiklar. Skapa din "contact.js"-reaktionskomponent i den mappen, och den kommer att generera sidan localhost/articles/contact.
Om du lägger en fil i pages/articles.js och en annan i pages/articles/index.js. Båda återspeglar samma sökväg localhost/blogg. I den här situationen renderar Next.js bara filen article.js. Hur är det med dynamiska rutter, där varje blogginlägg har sin egen väg:
- localhost/blogg/första-artikel
- localhost/blogg/-andra-artikel
Med hjälp av parentesnotationen kan du definiera en dynamisk rutt i Next.js. Till exempel: pages/article/[slug].js
Länka rutter
Du har nu slutfört din första rutt. Jag antar att du frågar hur man kopplar sidor till dessa rutt. Du behöver 'nästa/länk' för att göra det.
Här är ett exempel på en startsida som innehåller en länk till sidan Om:
Om du vill formatera länken, använd följande syntax:
Omdirigera rutter
Vad händer om du behöver tvinga fram en omdirigering till en viss sida? Till exempel när en knapp trycks in? Du kan åstadkomma detta genom att använda 'router.push':
SEO
Sidor i webbapplikationer kräver metaelement (huvud) utöver data i HTML-kroppen. Detta kommer att kräva installation av ett extra krav som heter React Helmet i en React-applikation.
Vi kan använda Head-komponenten från next/head i Next för att enkelt lägga till metadata till våra webbsidor som kommer att visas i sökresultat och inbäddningar:
Komponenter
Du kommer ofta att behöva utveckla komponenter eller en layoutfil. Till exempel en komponent som återger navigeringsfältet. Hittills har vi bara använt sidmappen. Vad händer om din komponent inte är avsedd att vara en ruttsida?
Du vill inte att användaren ska navigera till en sida som en localhost/navbar. Om du placerar Navbar.js-komponenten i pages-mappen, är det vad som kommer att hända. Vad ska man göra i situationen?
Lagra helt enkelt alla dina "inte en sida"-komponenter i en separat mapp. De flesta Next.js-projekt använder monikern "komponenter", och den här mappen skapas i rotmappen för ditt projekt.
Huvudkomponent
Den första sidladdningen renderas av Next.js på serversidan. Den gör detta genom att ändra HTML-koden på din sida. Rubriken ingår.
Next.js Head-komponenten används för att ge header-sektionstaggar som title och meta. Huvudkomponenten används i detta exempel på en layoutkomponent.
Skapa 404-sida hittades inte
Det är möjligt att skapa en egen 404-felsida. Du kanske vill anpassa meddelandet eller lägga till din egen siddesign. Skapa filen 404.js i pages-mappen.
När ett 404-fel uppstår kommer Next.js automatiskt att omdirigera till den här sidan. Här är ett exempel på en personlig 404-sida:
Datahämtning från serversidan
Istället för att ladda ner data på klientsidan låter Next.js dig utföra en initial datapopulation, vilket innebär att sidan skickas med data som redan är ifyllda från servern.
Du har två val för att implementera datahämtning på serversidan:
- Data bör hämtas vid varje begäran.
- Få data endast en gång under hela byggprocessen (statisk plats)
Hämta data på varje begäran
Metoden getServerSideProps används för att rendera varje begäran på serversidan. Denna funktion kan inkluderas i slutet av din komponentfil. Next.js kommer automatiskt att fylla i dina komponentrekvisita med getServerSideProps-objektet om den funktionen finns i din komponentfil.
Hämta data vid byggtid
Metoden getStaticProps används för att rendera serversidan vid byggtid. Denna funktion kan inkluderas i slutet av din komponentfil. Denna metod kör serverkoden och skickar en GET-förfrågan till servern, men bara en gång när vårt projekt är klart.
Varför bör du lära dig Next.js?
En av anledningarna till detta är att Next.js är byggt ovanpå React, en front-end utvecklingsverktygssats för skapa användargränssnitt som är mitt favoritval för att designa webbappar.
Men det skulle inte vara tillräckligt om Next.js inte var bra på vad den gjorde... eller hur?
Så, vad gör det exakt?
Vi måste först definiera några begrepp för att förstå det. Next.js blev populärt eftersom det löste ett problem som många webbutvecklare hade med webbappar på klientsidan (i webbläsaren). Dessa Single-Page Applications (SPA) hade en bättre upplevelse eftersom de inte behövde användaren för att ladda om sidan och tillät mer interaktivitet.
Men eftersom huvuddelen av materialet i en app som denna blir synlig först när den utförs i webbläsaren, har webbsökare svårt att förstå textinnehållet i en sådan app.
Som ett resultat, trots sin popularitet, förblev många SPA i stort sett anonyma för stora sökmotorer som Google. Next.js inkluderar nu en mer robust inbyggd mekanism för server-side rendering (SSR) av React-komponenter.
Next.js tillåter utvecklare att konstruera JavaScript-kod på servern under byggprocessen och tillhandahålla grundläggande, indexerbar HTML till användaren.
Fördelar
- Perfekt för användarupplevelsen
- Perfekt för SEO
- Bygg en supersnabb statisk webbplats som beter sig som en dynamik
- Flexibilitet i att bygga UI & UX.
- Många utvecklingsfördelar
- Stort samhällsstöd
Nackdelar
- Webbplatser eller applikationer har en viss tid att konstruera eller utveckla.
- För vissa uppgifter är Next.js otillräckligt. Utvecklare bör kunna konstruera dynamiska rutter med hjälp av Node.js-verktyg.
Slutsats
Som du kan se förenklar Next.js React-apputvecklingen och låter dig fokusera på det som är viktigast – din applogik och användargränssnitt. Den innehåller allt som behövs för att skapa moderna, frontendrika och API-drivna appar.
Det är också lämpligt för projekt med enbart innehåll, som bloggar och företagswebbplatser, på grund av dess förmåga att bygga statiska HTML-sidor.
Med de nuvarande utgåvorna upprätthåller Next.js inte bara en hög nivå av utvecklarupplevelse utan ger också verktyg för att öka visuell prestanda och användarupplevelse, vilket säkerställer en ljus framtid för detta ramverk.
Kommentera uppropet