table of contents - topidesta.files.wordpress.com · first, the page takes longer to become visible...

TableofContentsIntroduction

IntroductiontoNext.js

ThemainfeaturesprovidedbyNext.js

Next.jsvsGatsbyvscreate-react-app

HowtoinstallNext.js?

ViewsourcetoconfirmSSRisworking

Theappbundles

What'sthaticononthebottomright?

InstalltheReactDeveloperTools

Otherdebuggingtechniquesyoucanuse

Addingasecondpagetothesite

Linkingthetwopages

Dynamiccontentwiththerouter

Prefetching

Usingtheroutertodetecttheactivelink

Usingnext/router

FeeddatatothecomponentsusinggetInitialProps

CSS

Populatingtheheadtagwithcustomtags

Addingawrappercomponent

APIRoutes

Runcodeonlyontheserversideorclientside

2

Deployingtheproductionversion

DeployingonNow

Analyzingtheappbundles

Lazyloadingmodules

Wheretogofromhere

3

Introduction

Welcome!IwrotethisbooktohelpyouquicklylearnNext.jsandgetfamiliarwithhowitworks.

TheidealreaderofthebookhaszeroknowledgeofNext.js,hasusedReactinthepast,andislookingforwarddivingmoreintotheReactecosystem,inparticularserver-siderendering.

IfindNext.jsanawesometooltocreateWebApplications,andattheendofthebookIhopeyou'llbeasexcitedaboutitasIam.

Thankyouforgettingthisebook.IhopeitwillhelpyoulearnNext.js!

Flavio

[email protected],onTwitter@flaviocopes.

Mywebsiteisflaviocopes.com.

Introduction

4

mailto:[email protected]

https://twitter.com/flaviocopes

https://flaviocopes.com

IntroductiontoNext.jsWorkingonamodernJavaScriptapplicationpoweredbyReactisawesomeuntilyourealizethatthereareacoupleproblemsrelatedtorenderingallthecontentontheclient-side.

First,thepagetakeslongertobecomevisibletotheuser,becausebeforethecontentloads,alltheJavaScriptmustload,andyourapplicationneedstoruntodeterminewhattoshowonthepage.

Second,ifyouarebuildingapubliclyavailablewebsite,youhaveacontentSEOissue.SearchenginesaregettingbetteratrunningandindexingJavaScriptapps,butit'smuchbetterifwecansendthemcontentinsteadoflettingthemfigureitout.

Thesolutiontobothofthoseproblemsisserverrendering,alsocalledstaticpre-rendering.

Next.jsisoneReactframeworktodoallofthisinaverysimpleway,butit'snotlimitedtothis.It'sadvertisedbyitscreatorsasazero-configuration,single-commandtoolchainforReactapps.

ItprovidesacommonstructurethatallowsyoutoeasilybuildafrontendReactapplication,andtransparentlyhandlesserver-siderenderingforyou.

IntroductiontoNext.js

5

https://nextjs.org

ThemainfeaturesprovidedbyNext.jsHereisanon-exhaustivelistofthemainNext.jsfeatures:

HotCodeReloading

Next.jsreloadsthepagewhenitdetectsanychangesavedtodisk.

AutomaticRouting

AnyURLismappedtothefilesystem,tofilesputinthe pagesfolder,andyoudon'tneedanyconfiguration(youhavecustomizationoptionsofcourse).

SingleFileComponents

Using styled-jsx,completelyintegratedasbuiltbythesameteam,it'strivialtoaddstylesscopedtothecomponent.

ServerRendering

YoucanrenderReactcomponentsontheserverside,beforesendingtheHTMLtotheclient.

EcosystemCompatibility

Next.jsplayswellwiththerestoftheJavaScript,Node,andReactecosystem.


6

AutomaticCodeSplitting

PagesarerenderedwithjustthelibrariesandJavaScriptthattheyneed,nomore.InsteadofgeneratingonesingleJavaScriptfilecontainingalltheappcode,theappisbrokenupautomaticallybyNext.jsinseveraldifferentresources.

LoadingapageonlyloadstheJavaScriptnecessaryforthatparticularpage.

Next.jsdoesthatbyanalyzingtheresourcesimported.

IfonlyoneofyourpagesimportstheAxioslibrary,forexample,thatspecificpagewillincludethelibraryinitsbundle.

Thisensuresyourfirstpageloadisasfastasitcanbe,andonlyfuturepageloads(iftheywilleverbetriggered)willsendtheJavaScriptneededtotheclient.

Thereisonenotableexception.FrequentlyusedimportsaremovedintothemainJavaScriptbundleiftheyareusedinatleasthalfofthesitepages.

Prefetching

The Linkcomponent,usedtolinktogetherdifferentpages,supportsa prefetchpropwhichautomaticallyprefetchespageresources(includingcodemissingduetocodesplitting)inthebackground.

DynamicComponents

YoucanimportJavaScriptmodulesandReactComponentsdynamically.


7

StaticExports

Usingthe nextexportcommand,Next.jsallowsyoutoexportafullystaticsitefromyourapp.

TypeScriptSupport

Next.jsiswritteninTypeScriptandassuchcomeswithanexcellentTypeScriptsupport.


8

Next.jsvsGatsbyvscreate-react-appNext.js,Gatsby,and create-react-appareamazingtoolswecanusetopowerourapplications.

Let'sfirstsaywhattheyhaveincommon.TheyallhaveReactunderthehood,poweringtheentiredevelopmentexperience.Theyalsoabstractwebpackandallthoselowlevelthingsthatweusedtoconfiguremanuallyinthegoodolddays.

create-react-appdoesnothelpyougenerateaserver-side-renderedappeasily.Anythingthatcomeswithit(SEO,speed...)isonlyprovidedbytoolslikeNext.jsandGatsby.

WhenisNext.jsbetterthanGatsby?

Theycanbothhelpwithserver-siderendering,butin2differentways.

TheendresultusingGatsbyisastaticsitegenerator,withoutaserver.Youbuildthesite,andthenyoudeploytheresultofthebuildprocessstaticallyonNetlifyoranotherstatichostingsite.

Next.jsprovidesabackendthatcanserversiderenderaresponsetorequest,allowingyoutocreateadynamicwebsite,whichmeansyouwilldeployitonaplatformthatcanrunNode.js.

Next.jscangenerateastaticsitetoo,butIwouldnotsayit'sitsmainusecase.


9

https://flaviocopes.com/gatsby/

https://flaviocopes.com/react-create-react-app/

https://flaviocopes.com/webpack/

Ifmygoalwastobuildastaticsite,I'dhaveahardtimechoosingandperhapsGatsbyhasabetterecosystemofplugins,includingmanyforblogginginparticular.

GatsbyisalsoheavilybasedonGraphQL,somethingyoumightreallylikeordislikedependingonyouropinionsandneeds.


10

https://flaviocopes.com/graphql/

HowtoinstallNext.js?ToinstallNext.js,youneedtohaveNode.jsinstalled.

MakesurethatyouhavethelatestversionofNode.Checkwithrunning node-vinyourterminal,andcompareittothelatestLTSversionlistedonhttps://nodejs.org/.

AfteryouinstallNode.js,youwillhavethe npmcommandavailableintoyourcommandline.

Ifyouhaveanytroubleatthisstage,IrecommendthefollowingtutorialsIwroteforyou:

HowtoinstallNode.jsHowtoupdateNode.jsAnintroductiontothenpmpackagemanagerUnixShellsTutorialHowtousethemacOSterminalTheBashShell

NowthatyouhaveNode,updatedtothelatestversion,and npm,we'reset!

Wecanchoose2routesnow:using create-next-apportheclassicapproachwhichinvolvesinstallingandsettingupaNextappmanually.

Usingcreate-next-app

Ifyou'refamiliarwith create-react-app, create-next-appisthesamething-exceptitcreatesaNextappinsteadofaReactapp,asthenameimplies.


11

https://nodejs.org/

https://flaviocopes.com/node-installation/

https://flaviocopes.com/how-to-update-node/

https://flaviocopes.com/npm/

https://flaviocopes.com/shells/

https://flaviocopes.com/macos-terminal/

https://flaviocopes.com/bash/

https://flaviocopes.com/react-create-react-app/

IassumeyouhavealreadyinstalledNode.js,which,fromversion5.2(2+yearsagoatthetimeofwriting),comeswiththe npxcommandbundled.ThishandytoolletsusdownloadandexecuteaJavaScriptcommand,andwe'lluseitlikethis:

npxcreate-next-app

Thecommandaskstheapplicationname(andcreatesanewfolderforyouwiththatname),thendownloadsallthepackagesitneeds( react, react-dom, next),setsthe package.jsonto:

andyoucanimmediatelyrunthesampleappbyrunning npmrundev:


12

https://flaviocopes.com/npx/

Andhere'stheresultonhttp://localhost:3000:


13

http://localhost:3000

ThisistherecommendedwaytostartaNext.jsapplication,asitgivesyoustructureandsamplecodetoplaywith.There'smorethanjustthatdefaultsampleapplication;youcanuseanyoftheexamplesstoredathttps://github.com/zeit/next.js/tree/canary/examplesusingthe --exampleoption.Forexampletry:

npxcreate-next-app--exampleblog-starter

Whichgivesyouanimmediatelyusablebloginstancewithsyntaxhighlightingtoo:


14

https://github.com/zeit/next.js/tree/canary/examples

ManuallycreateaNext.jsapp

Youcanavoid create-next-appifyoufeellikecreatingaNextappfromscratch.Here'show:createanemptyfolderanywhereyoulike,forexampleinyourhomefolder,andgointoit:

mkdirnextjs

cdnextjs

andcreateyourfirstNextprojectdirectory:

mkdirfirstproject

cdfirstproject


15

Nowusethe npmcommandtoinitializeitasaNodeproject:

npminit-y

The -yoptiontells npmtousethedefaultsettingsforaproject,populatingasample package.jsonfile.

NowinstallNextandReact:

npminstallnextreactreact-dom

Yourprojectfoldershouldnowhave2files:

package.json(seemytutorialonit)package-lock.json(seemytutorialonpackage-lock)

andthe node_modulesfolder.


16

https://flaviocopes.com/package-json/

https://flaviocopes.com/package-lock-json/

Opentheprojectfolderusingyourfavoriteeditor.MyfavoriteeditorisVSCode.Ifyouhavethatinstalled,youcanrun code.inyourterminaltoopenthecurrentfolderintheeditor(ifthecommanddoesnotworkforyou,seethis)

Open package.json,whichnowhasthiscontent:

{

"name":"firstproject",

"version":"1.0.0",

"description":"",

"main":"index.js",

"scripts":{

"test":"echo\"Error:notestspecified\"&&exit1"

},

"keywords":[],

"author":"",

"license":"ISC",

"dependencies":{

"next":"^9.1.2",

"react":"^16.11.0",

"react-dom":"^16.11.0"

}

}

andreplacethe scriptssectionwith:

"scripts":{

"dev":"next",

"build":"nextbuild",

"start":"nextstart"

}

toaddtheNext.jsbuildcommands,whichwe'regoingtousesoon.


17

https://flaviocopes.com/vscode/

https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line

Tip:use "dev":"next-p3001",tochangetheportandrun,inthisexample,onport3001.

Nowcreatea pagesfolder,andaddan index.jsfile.

Inthisfile,let'screateourfirstReactcomponent.

We'regoingtouseitasthedefaultexport:

constIndex=()=>(

<div>

<h1>Homepage</h1>

</div>

)

exportdefaultIndex

Nowusingtheterminal,run npmrundevtostarttheNextdevelopmentserver.


18

Thiswillmaketheappavailableonport3000,onlocalhost.

Openhttp://localhost:3000inyourbrowsertoseeit.


19



20

ViewsourcetoconfirmSSRisworkingLet'snowchecktheapplicationisworkingasweexpectittowork.It'saNext.jsapp,soitshouldbeserversiderendered.

It'soneofthemainsellingpointsofNext.js:ifwecreateasiteusingNext.js,thesitepagesarerenderedontheserver,whichdeliversHTMLtothebrowser.

Thishas3majorbenefits:

TheclientdoesnotneedtoinstantiateReacttorender,whichmakesthesitefastertoyourusers.Searchengineswillindexthepageswithoutneedingtoruntheclient-sideJavaScript.SomethingGooglestarteddoing,butopenlyadmittedtobeaslowerprocess(andyoushouldhelpGoogleasmuchaspossible,ifyouwanttorankwell).Youcanhavesocialmediametatags,usefultoaddpreviewimages,customizetitleanddescriptionforanyofyourpagessharedonFacebook,Twitterandsoon.

Let'sviewthesourceoftheapp.UsingChromeyoucanright-clickanywhereinthepage,andpressViewPageSource.


21

Ifyouviewthesourceofthepage,you'llseethe <div><h1>Homepage</h1></div>snippetintheHTML body,alongwithabunchofJavaScriptfiles-theappbundles.

Wedon'tneedtosetupanything,SSR(server-siderendering)isalreadyworkingforus.

TheReactappwillbelaunchedontheclient,andwillbetheonepoweringinteractionslikeclickingalink,usingclient-siderendering.Butreloadingapagewillre-loaditfromtheserver.AndusingNext.jsthereshouldbenodifferenceintheresultinsidethebrowser-aserver-renderedpageshouldlookexactlylikeaclient-renderedpage.


22

TheappbundlesWhenweviewedthepagesource,wesawabunchofJavaScriptfilesbeingloaded:

Let'sstartbyputtingthecodeinanHTMLformattertogetitformattedbetter,sowehumanscangetabetterchanceatunderstandingit:

<!DOCTYPEhtml>

<html>

<head>

<metacharSet="utf-8"/>

<metaname="viewport"content="width=device-width,minimum-sca

le=1,initial-scale=1"/>

<metaname="next-head-count"content="2"/>

Theappbundles

23

https://htmlformatter.com/

<linkrel="preload"href="/_next/static/development/pages/ind

ex.js?ts=1572863116051"as="script"/>

<linkrel="preload"href="/_next/static/development/pages/_ap

p.js?ts=1572863116051"as="script"/>

<linkrel="preload"href="/_next/static/runtime/webpack.js?ts

=1572863116051"as="script"/>

<linkrel="preload"href="/_next/static/runtime/main.js?ts=15

72863116051"as="script"/>

</head>

<body>

<divid="__next">

<div>

<h1>Homepage</h1></div>

</div>

<scriptsrc="/_next/static/development/dll/dll_01ec57fc9b90d4

3b98a8.js?ts=1572863116051"></script>

<scriptid="__NEXT_DATA__"type="application/json">{"dataMana

ger":"[]","props":{"pageProps":{}},"page":"/","query":{},"buildId"

:"development","nextExport":true,"autoExport":true}</script>

<scriptasync=""data-next-page="/"src="/_next/static/develo

pment/pages/index.js?ts=1572863116051"></script>

<scriptasync=""data-next-page="/_app"src="/_next/static/de

velopment/pages/_app.js?ts=1572863116051"></script>

<scriptsrc="/_next/static/runtime/webpack.js?ts=157286311605

1"async=""></script>

<scriptsrc="/_next/static/runtime/main.js?ts=1572863116051"

async=""></script>

</body>

</html>

Wehave4JavaScriptfilesbeingdeclaredtobepreloadedinthehead,using rel="preload"as="script":

/_next/static/development/pages/index.js(96LOC)/_next/static/development/pages/_app.js(5900LOC)

Theappbundles

24

/_next/static/runtime/webpack.js(939LOC)/_next/static/runtime/main.js(12kLOC)

Thistellsthebrowsertostartloadingthosefilesassoonaspossible,beforethenormalrenderingflowstarts.Withoutthose,scriptswouldbeloadedwithanadditionaldelay,andthisimprovesthepageloadingperformance.

Thenthose4filesareloadedattheendofthe body,alongwith/_next/static/development/dll/dll_01ec57fc9b90d43b98a8.js(31kLOC),andaJSONsnippetthatsetssomedefaultsforthepagedata:

<scriptid="__NEXT_DATA__"type="application/json">

{

"dataManager":"[]",

"props":{

"pageProps":{}

},

"page":"/",

"query":{},

"buildId":"development",

"nextExport":true,

"autoExport":true

}

</script>

The4bundlefilesloadedarealreadyimplementingonefeaturecalledcodesplitting.The index.jsfileprovidesthecodeneededfortheindexcomponent,whichservesthe /route,andifwehadmorepageswe'dhavemorebundlesforeachpage,whichwillthenonlybeloadedifneeded-toprovideamoreperformantloadtimeforthepage.

Theappbundles

25

Theappbundles

26

What'sthaticononthebottomright?Didyouseethatlittleiconatthebottomrightofthepage,whichlookslikealightning?

Ifyouhoverit,it'sgoingtosay"PrerenderedPage":


27

Thisicon,whichisonlyvisibleindevelopmentmodeofcourse,tellsyouthepagequalifiesforautomaticstaticoptimization,whichbasicallymeansthatitdoesnotdependondatathatneedstobefetchedatinvokationtime,anditcanbeprerenderedandbuiltasastaticHTMLfileatbuildtime(whenwerun npmrunbuild).

Nextcandeterminethisbytheabsenceofthe getInitialProps()methodattachedtothepagecomponent.

Whenthisisthecase,ourpagecanbeevenfasterbecauseitwillbeservedstaticallyasanHTMLfileratherthangoingthroughtheNode.jsserverthatgeneratestheHTMLoutput.

Anotherusefuliconthatmightappearnexttoit,orinsteadofitonnon-prerenderedpages,isalittleanimatedtriangle:


28

Thisisacompilationindicator,andappearswhenyousaveapageandNext.jsiscompilingtheapplicationbeforehotcodereloadingkicksintoreloadthecodeintheapplicationautomatically.

It'sareallynicewaytoimmediatelydetermineiftheapphasalreadybeencompiledandyoucantestapartofityou'reworkingon.


29

InstalltheReactDeveloperToolsNext.jsisbasedonReact,sooneveryusefultoolweabsolutelyneedtoinstall(ifyouhaven'talready)istheReactDeveloperTools.

AvailableforbothChromeandFirefox,theReactDeveloperToolsareanessentialinstrumentyoucanusetoinspectaReactapplication.

Now,theReactDeveloperToolsarenotspecifictoNext.jsbutIwanttointroducethembecauseyoumightnotbe100%familiarwithallthetoolsReactprovides.It'sbesttogoalittleintodebuggingtoolingthanassumingyoualreadyknowthem.

TheyprovideaninspectorthatrevealstheReactcomponentstreethatbuildsyourpage,andforeachcomponentyoucangoandchecktheprops,thestate,hooks,andlotsmore.

OnceyouhaveinstalledtheReactDeveloperTools,youcanopentheregularbrowserdevtools(inChrome,it'sright-clickinthepage,thenclick Inspect)andyou'llfind2newpanels:ComponentsandProfiler.


30

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

https://addons.mozilla.org/en-US/firefox/addon/react-devtools/

Ifyoumovethemouseoverthecomponents,you'llseethatinthepage,thebrowserwillselectthepartsthatarerenderedbythatcomponent.

Ifyouselectanycomponentinthetree,therightpanelwillshowyouareferencetotheparentcomponent,andthepropspassedtoit:


31

Youcaneasilynavigatebyclickingaroundthecomponentnames.

YoucanclicktheeyeiconintheDeveloperToolstoolbartoinspecttheDOMelement,andalsoifyouusethefirsticon,theonewiththemouseicon(whichconvenientlysitsunderthesimilarregularDevToolsicon),youcanhoveranelementinthebrowserUItodirectlyselecttheReactcomponentthatrendersit.

Youcanusethe bugicontologacomponentdatatotheconsole.


32

Thisisprettyawesomebecauseonceyouhavethedataprintedthere,youcanright-clickanyelementandpress"Storeasaglobalvariable".ForexamplehereIdiditwiththe urlprop,andIwasabletoinspectitintheconsoleusingthetemporaryvariableassignedtoit, temp1:


33

UsingSourceMaps,whichareloadedbyNext.jsautomaticallyindevelopmentmode,fromtheComponentspanelwecanclickthe <>codeandtheDevToolswillswitchtotheSourcepanel,showingusthecomponentsourcecode:


34

TheProfilertabisevenmoreawesome,ifpossible.Itallowsustorecordaninteractionintheapp,andseewhathappens.Icannotshowanexampleyet,becauseitneedsatleast2componentstocreateaninteraction,andwehavejustonenow.I'lltalkaboutthislater.


35

IshowedallscreenshotsusingChrome,buttheReactDeveloperToolsworksinthesamewayinFirefox:


36


37

OtherdebuggingtechniquesyoucanuseInadditiontotheReactDeveloperTools,whichareessentialtobuildingaNext.jsapplication,Iwanttoemphasize2waystodebugNext.jsapps.

Thefirstisobviously console.log()andalltheotherConsoleAPItools.ThewayNextappsworkwillmakealogstatementworkinthebrowserconsoleORintheterminalwhereyoustartedNextusing npmrundev.

Inparticular,ifthepageloadsfromtheserver,whenyoupointtheURLtoit,oryouhittherefreshbutton/cmd/ctrl-R,anyconsolelogginghappensintheterminal.

Subsequentpagetransitionsthathappenbyclickingthemousewillmakeallconsolelogginghappeninsidethebrowser.

Justrememberifyouaresurprisedbymissinglogging.

Anothertoolthatisessentialisthe debuggerstatement.Addingthisstatementtoacomponentwillpausethebrowserrenderingthepage:


38

https://flaviocopes.com/console-api/

Reallyawesomebecausenowyoucanusethebrowserdebuggertoinspectvaluesandrunyourapponelineatatime.


39

YoucanalsousetheVSCodedebuggertodebugserver-sidecode.Imentionthistechniqueandthistutorialtosetthisup.


40

https://github.com/Microsoft/vscode-recipes/tree/master/Next-js

AddingasecondpagetothesiteNowthatwehaveagoodgraspofthetoolswecanusetohelpusdevelopNext.jsapps,let'scontinuefromwhereweleftourfirstapp:

Iwanttoaddasecondpagetothiswebsite,ablog.It'sgoingtobeservedinto /blog,andforthetimebeingitwilljustcontainasimplestaticpage,justlikeourfirst index.jscomponent:


41

Aftersavingthenewfile,the npmrundevprocessalreadyrunningisalreadycapableofrenderingthepage,withouttheneedtorestartit.

WhenwehittheURLhttp://localhost:3000/blogwehavethenewpage:


42

http://localhost:3000/blog

andhere'swhattheterminaltoldus:


43

NowthefactthattheURLis /blogdependsonjustthefilename,anditspositionunderthe pagesfolder.

Youcancreatea pages/hey/hopage,andthatpagewillshowupontheURLhttp://localhost:3000/hey/ho.

Whatdoesnotmatter,fortheURLpurposes,isthecomponentnameinsidethefile.

Trygoingandviewingthesourceofthepage,whenloadedfromtheserveritwilllist /_next/static/development/pages/blog.jsasoneofthebundlesloaded,andnot/_next/static/development/pages/index.jslikeinthehomepage.Thisisbecausethankstoautomaticcodesplittingwedon'tneedthebundlethatservesthehomepage.Justthebundlethatservestheblogpage.

Wecanalsojustexportananonymousfunctionfrom blog.js:

exportdefault()=>(

<div>

<h1>Blog</h1>


44

http://localhost:3000/hey/ho

</div>

)

orifyoupreferthenon-arrowfunctionsyntax:

exportdefaultfunction(){

return(

<div>

<h1>Blog</h1>

</div>

)

}


45

LinkingthetwopagesNowthatwehave2pages,definedby index.jsand blog.js,wecanintroducelinks.

NormalHTMLlinkswithinpagesaredoneusingthe atag:

<ahref="/blog">Blog</a>

Wecan'tdodothatinNext.js.

Why?Wetechnicallycan,ofcourse,becausethisistheWebandontheWebthingsneverbreak(that'swhywecanstillusethe <marquee>tag.ButoneofthemainbenefitsofusingNextisthatonceapageisloaded,transitionstootherpageareveryfastthankstoclient-siderendering.

Ifyouuseaplain alink:

constIndex=()=>(

<div>

<h1>Homepage</h1>

<ahref='/blog'>Blog</a>

</div>

)

exportdefaultIndex

NowopentheDevTools,andtheNetworkpanelinparticular.Thefirsttimeweload http://localhost:3000/wegetallthepagebundlesloaded:

Linkingthetwopages

46

Nowifyouclickthe"Preservelog"button(toavoidclearingtheNetworkpanel),andclickthe"Blog"link,thisiswhathappens:

Linkingthetwopages

47

WegotallthatJavaScriptfromtheserver,again!But..wedon'tneedallthatJavaScriptifwealreadygotit.We'djustneedthe blog.jspagebundle,theonlyonethat'snewtothepage.

Tofixthisproblem,weuseacomponentprovidedbyNext,calledLink.

Weimportit:

importLinkfrom'next/link'

andthenweuseittowrapourlink,likethis:


Linkingthetwopages

48

constIndex=()=>(

<div>

<h1>Homepage</h1>

<Linkhref='/blog'>

<a>Blog</a>

</Link>

</div>

)

exportdefaultIndex

Nowifyouretrythethingwedidpreviously,you'llbeabletoseethatonlythe blog.jsbundleisloadedwhenwemovetotheblogpage:

Linkingthetwopages

49

andthepageloadedsofasterthanbefore,thebrowserusualspinneronthetabdidn'tevenappear.YettheURLchanged,asyoucansee.ThisisworkingseamlesslywiththebrowserHistoryAPI.

Thisisclient-siderenderinginaction.

Whatifyounowpressthebackbutton?Nothingisbeingloaded,becausethebrowserstillhastheold index.jsbundleinplace,readytoloadthe /indexroute.It'sallautomatic!

Linkingthetwopages

50

https://flaviocopes.com/history-api/

DynamiccontentwiththerouterInthepreviouschapterwesawhowtolinkthehometotheblogpage.

AblogisagreatusecaseforNext.js,onewe'llcontinuetoexploreinthischapterbyaddingblogposts.

BlogpostshaveadynamicURL.Forexampleaposttitled"HelloWorld"mighthavetheURL /blog/hello-world.Aposttitled"Mysecondpost"mighthavetheURL /blog/my-second-post.

Thiscontentisdynamic,andmightbetakenfromadatabase,markdownfilesormore.

Next.jscanservedynamiccontentbasedonadynamicURL.

WecreateadynamicURLbycreatingadynamicpagewiththe []syntax.

How?Weadda pages/blog/[id].jsfile.ThisfilewillhandleallthedynamicURLsunderthe /blog/route,liketheoneswementionedabove: /blog/hello-world, /blog/my-second-postandmore.

Inthefilename, [id]insidethesquarebracketsmeansthatanythingthat'sdynamicwillbeputinsidethe idparameterofthequerypropertyoftherouter.

Ok,that'sabittoomanythingsatonce.

What'stherouter?

TherouterisalibraryprovidedbyNext.js.

Weimportitfrom next/router:


51

import{useRouter}from'next/router'

andoncewehave useRouter,weinstantiatetherouterobjectusing:

constrouter=useRouter()

Oncewehavethisrouterobject,wecanextractinformationfromit.

InparticularwecangetthedynamicpartoftheURLinthe [id].jsfilebyaccessing router.query.id.

ThedynamicpartcanalsojustbeaportionoftheURL,like post-[id].js.

Solet'sgoonandapplyallthosethingsinpractice.

Createthefile pages/blog/[id].js:


exportdefault()=>{


return(

<>

<h1>Blogpost</h1>

<p>Postid:{router.query.id}</p>

</>

)

}

Nowifyougotothe http://localhost:3000/blog/testrouter,youshouldseethis:


52

Wecanusethis idparametertogatherthepostfromalistofposts.Fromadatabase,forexample.Tokeepthingssimplewe'lladdaposts.jsonfileintheprojectrootfolder:

{

"test":{

"title":"testpost",

"content":"Heysomepostcontent"

},

"second":{

"title":"secondpost",

"content":"Heythisisthesecondpostcontent"

}

}

Nowwecanimportitandlookupthepostfromthe idkey:


53


importpostsfrom'../../posts.json'

exportdefault()=>{


constpost=posts[router.query.id]

return(

<>

<h1>{post.title}</h1>

<p>{post.content}</p>

</>

)

}

Reloadingthepageshouldshowusthisresult:


54

Butit'snot!Instead,wegetanerrorintheconsole,andanerrorinthebrowser,too:

Why?Because..duringrendering,whenthecomponentisinitialized,thedataisnotthereyet.We'llseehowtoprovidethedatatothecomponentwithgetInitialPropsinthenextlesson.

Fornow,addalittle if(!post)return<p></p>checkbeforereturningtheJSX:



exportdefault()=>{



if(!post)return<p></p>


55

return(

<>



</>

)

}

Nowthingsshouldwork.Initiallythecomponentisrenderedwithoutthedynamic router.query.idinformation.Afterrendering,Next.jstriggersanupdatewiththequeryvalueandthepagedisplaysthecorrectinformation.

Andifyouviewsource,thereisthatempty <p>tagintheHTML:


56

We'llsoonfixthisissuethatfailstoimplementSSRandthisharmsbothloadingtimesforourusers,SEOandsocialsharingaswealreadydiscussed.

Wecancompletetheblogexamplebylistingthosepostsinpages/blog.js:

importpostsfrom'../posts.json'

constBlog=()=>(

<div>

<h1>Blog</h1>

<ul>

{Object.entries(posts).map((value,index)=>{

return<likey={index}>{value[1].title}</li>

})}

</ul>

</div>

)

exportdefaultBlog

Andwecanlinkthemtotheindividualpostpages,byimporting Linkfrom next/linkandusingitinsidethepostsloop:


importpostsfrom'../posts.json'

constBlog=()=>(

<div>

<h1>Blog</h1>

<ul>

{Object.entries(posts).map((value,index)=>{

return(

<likey={index}>


57

<Linkhref='/blog/[id]'as={'/blog/'+value[0]}>

<a>{value[1].title}</a>

</Link>

</li>

)

})}

</ul>

</div>

)

exportdefaultBlog


58

PrefetchingImentionedpreviouslyhowthe LinkNext.jscomponentcanbeusedtocreatelinksbetween2pages,andwhenyouuseit,Next.jstransparentlyhandlesfrontendroutingforus,sowhenauserclicksalink,frontendtakescareofshowingthenewpagewithouttriggeringanewclient/serverrequestandresponsecycle,asitnormallyhappenswithwebpages.

There'sanotherthingthatNext.jsdoesforyouwhenyouuse Link.

Assoonasanelementwrappedwithin <Link>appearsintheviewport(whichmeansit'svisibletothewebsiteuser),Next.jsprefetchestheURLitpointsto,aslongasit'salocallink(onyourwebsite),makingtheapplicationsuperfasttotheviewer.

Thisbehaviorisonlybeingtriggeredinproductionmode(we'lltalkaboutthisin-depthlater),whichmeansyouhavetostoptheapplicationifyouarerunningitwith npmrundev,compileyourproductionbundlewith npmrunbuildandrunitwith npmrunstartinstead.

UsingtheNetworkinspectorintheDevToolsyou'llnoticethatanylinksabovethefold,atpageload,starttheprefetchingassoonastheloadeventhasbeenfiredonyourpage(triggeredwhenthepageisfullyloaded,andhappensafterthe DOMContentLoadedevent).

Anyother Linktagnotintheviewportwillbeprefetchedwhentheuserscrollsandit

Prefetchingisautomaticonhighspeedconnections(Wifiand3g+connections,unlessthebrowsersendsthe Save-DataHTTPHeader.

Prefetching

59

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Save-Data

Youcanoptoutfromprefetchingindividual Linkinstancesbysettingthe prefetchpropto false:

<Linkhref="/a-link"prefetch={false}>

<a>Alink</a>

</Link>

Prefetching

60

UsingtheroutertodetecttheactivelinkOneveryimportantfeaturewhenworkingwithlinksisdeterminingwhatisthecurrentURL,andinparticularassigningaclasstotheactivelink,sowecanstyleitdifferentlyfromtheotherones.

Thisisespeciallyusefulinyoursiteheader,forexample.

TheNext.jsdefault Linkcomponentofferedin next/linkdoesnotdothisautomaticallyforus.

WecancreateaLinkcomponentourselves,andwestoreitinafileLink.jsintheComponentsfolder,andimportthatinsteadofthedefault next/link.

Inthiscomponent,we'llfirstimportReactfrom react,Linkfromnext/linkandthe useRouterhookfrom next/router.

Insidethecomponentwedetermineifthecurrentpathnamematchesthe hrefpropofthecomponent,andifsoweappendthe selectedclasstothechildren.

Wefinallyreturnthischildrenwiththeupdatedclass,usingReact.cloneElement():

importReactfrom'react'



exportdefault({href,children})=>{



61

letclassName=children.props.className||''

if(router.pathname===href){

className=`${className}selected`

}

return<Linkhref={href}>{React.cloneElement(children,{classN

ame})}</Link>

}


62

Usingnext/routerWealreadysawhowtousetheLinkcomponenttodeclarativelyhandleroutinginNext.jsapps.

It'sreallyhandytomanageroutinginJSX,butsometimesyouneedtotriggeraroutingchangeprogrammatically.

Inthiscase,youcanaccesstheNext.jsRouterdirectly,providedinthenext/routerpackage,andcallits push()method.

Here'sanexampleofaccessingtherouter:


exportdefault()=>{


//...

}

Oncewegettherouterobjectbyinvoking useRouter(),wecanuseitsmethods.

Thisistheclientsiderouter,somethodsshouldonlybeusedinfrontendfacingcode.Theeasiestwaytoensurethisistowrapcallsinthe useEffect()Reacthook,orinsidecomponentDidMount()inReactstatefulcomponents.

Theonesyou'lllikelyusethemostare push()and prefetch().

push()allowsustoprogrammaticallytriggeraURLchange,inthefrontend:

Usingnext/router

63

router.push('/login')

prefetch()allowsustoprogrammaticallyprefetchaURL,usefulwhenwedon'thavea Linktagwhichautomaticallyhandlesprefetchingforus:

router.prefetch('/login')

Fullexample:


exportdefault()=>{


useEffect(()=>{

router.prefetch('/login')

})

}

Youcanalsousetheroutertolistenforroutechangeevents.

Usingnext/router

64

https://nextjs.org/docs#router-events

FeeddatatothecomponentsusinggetInitialPropsInthepreviouschapterwehadanissuewithdynamicallygeneratingthepostpage,becausethecomponentrequiredsomedataupfront,andwhenwetriedtogetthedatafromtheJSONfile:



exportdefault()=>{



return(

<>



</>

)

}

wegotthiserror:


65

Howdowesolvethis?AndhowdowemakeSSRworkfordynamicroutes?

Wemustprovidethecomponentwithprops,usingaspecialfunctioncalled getInitialProps()whichisattachedtothecomponent.

Todoso,firstwenamethecomponent:

constPost=()=>{

//...

}

exportdefaultPost

thenweaddthefunctiontoit:

constPost=()=>{


66

//...

}

Post.getInitialProps=()=>{

//...

}

exportdefaultPost

Thisfunctiongetsanobjectasitsargument,whichcontainsseveralproperties.Inparticular,thethingweareinterestedintonowisthatwegetthe queryobject,theoneweusedpreviouslytogetthepostid.

Sowecangetitusingtheobjectdestructuringsyntax:

Post.getInitialProps=({query})=>{

//...

}

Nowwecanreturnthepostfromthisfunction:


return{

post:posts[query.id]

}

}

Andwecanalsoremovetheimportof useRouter,andwegetthepostfromthe propspropertypassedtothe Postcomponent:


constPost=props=>{

return(

<div>


67

<h1>{props.post.title}</h1>

<p>{props.post.content}</p>

</div>

)

}


return{


}

}

exportdefaultPost

Nowtherewillbenoerror,andSSRwillbeworkingasexpected,asyoucanseecheckingviewsource:


68

The getInitialPropsfunctionwillbeexecutedontheserverside,butalsoontheclientside,whenwenavigatetoanewpageusingtheLinkcomponentaswedid.

It'simportanttonotethat getInitialPropsgets,inthecontextobjectitreceives,inadditiontothe queryobjecttheseotherproperties:

pathname:the pathsectionofURLasPath-Stringoftheactualpath(includingthequery)showsinthebrowser

whichinthecaseofcalling http://localhost:3000/blog/testwillrespectivelyresultto:

/blog/[id]

/blog/test

Andinthecaseofserversiderendering,itwillalsoreceive:

req:theHTTPrequestobjectres:theHTTPresponseobjecterr:anerrorobject

reqand reswillbefamiliartoyouifyou'vedoneanyNode.jscoding.


69

CSSHowdowestyleReactcomponentsinNext.js?

Wehavealotoffreedom,becausewecanusewhateverlibraryweprefer.

ButNext.jscomeswith styled-jsxbuilt-in,becausethat'salibrarybuiltbythesamepeopleworkingonNext.js.

Andit'saprettycoollibrarythatprovidesusscopedCSS,whichisgreatformaintainabilitybecausetheCSSisonlyaffectingthecomponentit'sappliedto.

IthinkthisisagreatapproachatwritingCSS,withouttheneedtoapplyadditionallibrariesorpreprocessorsthataddcomplexity.

ToaddCSStoaReactcomponentinNext.jsweinsertitinsideasnippetintheJSX,whichstartwith

<stylejsx>{`

andendswith

`}</style>

InsidethisweirdblockswewriteplainCSS,aswe'ddoina .cssfile:

<stylejsx>{`

h1{

font-size:3rem;

}

CSS

70

https://github.com/zeit/styled-jsx

`}</style>

YouwriteitinsidetheJSX,likethis:

constIndex=()=>(

<div>

<h1>Homepage</h1>

<stylejsx>{`

h1{

font-size:3rem;

}

`}</style>

</div>

)

exportdefaultIndex

Insidetheblockwecanuseinterpolationtodynamicallychangethevalues.Forexamplehereweassumea sizepropisbeingpassedbytheparentcomponent,andweuseitinthe styled-jsxblock:

constIndex=props=>(

<div>

<h1>Homepage</h1>

<stylejsx>{`

h1{

font-size:${props.size}rem;

}

`}</style>

</div>

)

CSS

71

IfyouwanttoapplysomeCSSglobally,notscopedtoacomponent,youaddthe globalkeywordtothe styletag:

<stylejsxglobal>{`

body{

margin:0;

}

`}</style>

IfyouwanttoimportanexternalCSSfileinaNext.jscomponent,youhavetofirstinstall @zeit/next-css:

npminstall@zeit/next-css

andthencreateaconfigurationfileintherootoftheproject,callednext.config.js,withthiscontent:

constwithCSS=require('@zeit/next-css')

module.exports=withCSS()

AfterrestartingtheNextapp,youcannowimportCSSlikeyounormallydowithJavaScriptlibrariesorcomponents:

import'../style.css'

YoucanalsoimportaSASSfiledirectly,usingthe @zeit/next-sasslibraryinstead.

CSS

72

https://github.com/zeit/next-plugins/tree/master/packages/next-sass

PopulatingtheheadtagwithcustomtagsFromanyNext.jspagecomponent,youcanaddinformationtothepageheader.

Thisishandywhen:

youwanttocustomizethepagetitleyouwanttochangeametatag

Howcanyoudoso?

Insideeverycomponentyoucanimportthe Headcomponentfromnext/headandincludeitinyourcomponentJSXoutput:

importHeadfrom'next/head'

constHouse=props=>(

<div>

<Head>

<title>Thepagetitle</title>

</Head>

{/*therestoftheJSX*/}

</div>

)

exportdefaultHouse

YoucanaddanyHTMLtagyou'dliketoappearinthe <head>sectionofthepage.


73

Whenmountingthecomponent,Next.jswillmakesurethetagsinsideHeadareaddedtotheheadingofthepage.Samewhenunmountingthecomponent,Next.jswilltakecareofremovingthosetags.


74

AddingawrappercomponentAllthepagesonyoursitelookmoreorlessthesame.There'sachromewindow,acommonbaselayer,andyoujustwanttochangewhat'sinside.

There'sanavbar,asidebar,andthentheactualcontent.

HowdoyoubuildsuchsysteminNext.js?

Thereare2ways.OneisusingaHigherOrderComponent,bycreatinga components/Layout.jscomponent:

exportdefaultPage=>{

return()=>(

<div>

<nav>

<ul>....</ul>

</hav>

<main>

<Page/>

</main>

</div>

)

}

Intherewecanimportseparatecomponentsforheadingand/orsidebar,andwecanalsoaddalltheCSSweneed.

Andyouuseitineverypagelikethis:

importwithLayoutfrom'../components/Layout.js'

constPage=()=><p>Here'sapage!</p>


75

https://flaviocopes.com/react-higher-order-components/

exportdefaultwithLayout(Page)

ButIfoundthisworksonlyforsimplecases,whereyoudon'tneedtocall getInitialProps()onapage.

Why?

Because getInitialProps()getsonlycalledonthepagecomponent.ButifweexporttheHigherOrderComponentwithLayout()fromapage, Page.getInitialProps()isnotcalled.withLayout.getInitialProps()would.

Toavoidunnecessarilycomplicatingourcodebase,thealternativeapproachistouseprops:

exportdefaultprops=>(

<div>

<nav>

<ul>....</ul>

</hav>

<main>

{props.content}

</main>

</div>

)

andinourpagesnowweuseitlikethis:

importLayoutfrom'../components/Layout.js'

constPage=()=>(

<Layoutcontent={(

<p>Here'sapage!</p>

)}/>


76

)

Thisapproachletsususe getInitialProps()fromwithinourpagecomponent,withtheonlydownsideofhavingtowritethecomponentJSXinsidethe contentprop:

importLayoutfrom'../components/Layout.js'

constPage=()=>(

<Layoutcontent={(

<p>Here'sapage!</p>

)}/>

)

Page.getInitialProps=({query})=>{

//...

}


77

APIRoutesInadditiontocreatingpageroutes,whichmeanspagesareservedtothebrowserasWebpages,Next.jscancreateAPIroutes.

ThisisaveryinterestingfeaturebecauseitmeansthatNext.jscanbeusedtocreateafrontendfordatathatisstoredandretrievedbyNext.jsitself,transferringJSONviafetchrequests.

APIroutesliveunderthe /pages/api/folderandaremappedtothe/apiendpoint.

Thisfeatureisveryusefulwhencreatingapplications.

Inthoseroutes,wewriteNode.jscode(ratherthanReactcode).It'saparadigmshift,youmovefromthefrontendtothebackend,butveryseamlessly.

Sayyouhavea /pages/api/comments.jsfile,whosegoalistoreturnthecommentsofablogpostasJSON.

Sayyouhavealistofcommentsstoredina comments.jsonfile:

[

{

"comment":"First"

},

{

"comment":"Nicepost"

}

]

Here'sasamplecode,whichreturnstotheclientthelistofcomments:

APIRoutes

78

importcommentsfrom'./comments.json'

exportdefault(req,res)=>{

res.status(200).json(comments)

}

Itwilllistenonthe /api/commentsURLforGETrequests,andyoucantrycallingitusingyourbrowser:

APIroutescanalsousedynamicroutinglikepages,usethe []syntaxtocreateadynamicAPIroute,like/pages/api/comments/[id].jswhichwillretrievethecommentsspecifictoapostid.

APIRoutes

79

Insidethe [id].jsyoucanretrievethe idvaluebylookingitupinsidethe req.queryobject:

importcommentsfrom'../comments.json'


res.status(200).json({post:req.query.id,comments})

}

Heresyoucanseetheabovecodeinaction:

Indynamicpages,you'dneedtoimport useRouterfrom next/router,thengettherouterobjectusing constrouter=useRouter(),andthenwe'dbeabletogetthe idvalueusing router.query.id.

Intheserver-sideit'salleasier,asthequeryisattachedtotherequestobject.

IfyoudoaPOSTrequest,allworksinthesameway-itallgoesthroughthatdefaultexport.

ToseparatePOSTfromGETandotherHTTPmethods(PUT,DELETE),lookupthe req.methodvalue:

APIRoutes

80


switch(req.method){

case'GET':

//...

break

case'POST':

//...

break

default:

res.status(405).end()//MethodNotAllowed

break

}

}

Inadditionto req.queryand req.methodwealreadysaw,wehaveaccesstocookiesbyreferencing req.cookies,therequestbodyinreq.body.

Underthehoods,thisisallpoweredbyMicro,alibrarythatpowersasynchronousHTTPmicroservices,madebythesameteamthatbuiltNext.js.

YoucanmakeuseofanyMicromiddlewareinourAPIroutestoaddmorefunctionality.

APIRoutes

81

https://github.com/zeit/micro

RuncodeonlyontheserversideorclientsideInyourpagecomponents,youcanexecutecodeonlyintheserver-sideorontheclient-side,bycheckingthe windowproperty.

Thispropertyisonlyexistinginsidethebrowser,soyoucancheck

if(typeofwindow==='undefined'){

}

andaddtheserver-sidecodeinthatblock.

Similarly,youcanexecuteclient-sidecodeonlybychecking

if(typeofwindow!=='undefined'){

}

JSTip:Weusethe typeofoperatorherebecausewecan'tdetectavaluetobeundefinedinotherways.Wecan'tdo if(window===undefined)becausewe'dgeta"windowisnotdefined"runtimeerror

Next.js,asabuild-timeoptimization,alsoremovesthecodethatusesthosechecksfrombundles.Aclient-sidebundlewillnotincludethecontentwrappedintoa if(typeofwindow==='undefined'){}block.


82


83

DeployingtheproductionversionDeployinganappisalwaysleftlastintutorials.

HereIwanttointroduceitearly,justbecauseit'ssoeasytodeployaNext.jsappthatwecandiveintoitnow,andthenmoveontoothermorecomplextopicslateron.

Rememberinthe"HowtoinstallNext.js"chapterItoldyoutoaddthose3linestothe package.json scriptsection:

"scripts":{

"dev":"next",


"start":"nextstart"

}

Weused npmrundevuptonow,tocallthe nextcommandinstalledlocallyin node_modules/next/dist/bin/next.Thisstartedthedevelopmentserver,whichprovidedussourcemapsandhotcodereloading,twoveryusefulfeatureswhiledebugging.

Thesamecommandcanbeinvokedtobuildthewebsitepassingthebuildflag,byrunning npmrunbuild.Then,thesamecommandcanbeusedtostarttheproductionapppassingthe startflag,byrunning npmrunstart.

Those2commandsaretheoneswemustinvoketosuccessfullydeploytheproductionversionofoursitelocally.Theproductionversionishighlyoptimizedanddoesnotcomewithsourcemapsand


84

otherthingslikehotcodereloadingthatwouldnotbebeneficialtoourendusers.

So,let'screateaproductiondeployofourapp.Builditusing:

npmrunbuild

Theoutputofthecommandtellsusthatsomeroutes( /and /blogarenowprerenderedasstaticHTML,while /blog/[id]willbeservedbytheNode.jsbackend.

Thenyoucanrun npmrunstarttostarttheproductionserverlocally:

npmrunstart


85

Visitinghttp://localhost:3000willshowustheproductionversionoftheapp,locally.


86


DeployingonNowInthepreviouschapterwedeployedtheNext.jsapplicationlocally.

Howdowedeployittoarealwebserver,sootherpeoplecanaccessit?

OneofthemostsimplewaystodeployaNextapplicationisthroughtheNowplatformcreatedbyZeit,thesamecompanythatcreatedtheOpenSourceprojectNext.js.YoucanuseNowtodeployNode.jsapps,StaticWebsites,andmuchmore.

Nowmakesthedeploymentanddistributionstepofanappvery,verysimpleandfast,andinadditiontoNode.jsapps,theyalsosupportdeployingGo,PHP,Pythonandotherlanguages.

Youcanthinkofitasthe"cloud",asyoudon'treallyknowwhereyourappwillbedeployed,butyouknowthatyouwillhaveaURLwhereyoucanreachit.

Nowisfreetostartusing,withgenerousfreeplanthatcurrentlyincludes100GBofhosting,1000serverlessfunctionsinvocationsperday,1000buildspermonth,100GBofbandwidthpermonth,andoneCDNlocation.Thepricingpagehelpsgetanideaofthecostsifyouneedmore.

ThebestwaytostartusingNowisbyusingtheofficialNowCLI:

npminstall-gnow

Oncethecommandisavailable,run

DeployingonNow

87

https://zeit.co

https://zeit.co/pricing

nowlogin

andtheappwillaskyouforyouremail.

Ifyouhaven'tregisteredalready,createanaccountonhttps://zeit.co/signupbeforecontinuing,thenaddyouremailtotheCLIclient.

Oncethisisdone,fromtheNext.jsprojectrootfolderrun

now

andtheappwillbeinstantlydeployedtotheNowcloud,andyou'llbegiventheuniqueappURL:

Onceyourunthe nowprogram,theappisdeployedtoarandomURLunderthe now.shdomain.

Wecansee3differentURLsintheoutputgivenintheimage:

https://firstproject-2pv7khwwr.now.shhttps://firstproject-sepia-ten.now.shhttps://firstproject.flaviocopes.now.sh

DeployingonNow

88

https://zeit.co/signup

https://firstproject-2pv7khwwr.now.sh

https://firstproject-sepia-ten.now.sh

https://firstproject.flaviocopes.now.sh

Whysomany?

ThefirstistheURLidentifyingthedeploy.Everytimewedeploytheapp,thisURLwillchange.

Youcantestimmediatelybychangingsomethingintheprojectcode,andrunning nowagain:

Theother2URLswillnotchange.Thefirstisarandomone,thesecondisyourprojectname(whichdefaultstothecurrentprojectfolder,youraccountnameandthen now.sh.

IfyouvisittheURL,youwillseetheappdeployedtoproduction.

DeployingonNow

89

YoucanconfigureNowtoservethesitetoyourowncustomdomainorsubdomain,butIwillnotdiveintothatrightnow.

The now.shsubdomainisenoughforourtestingpurposes.

DeployingonNow

90

AnalyzingtheappbundlesNextprovidesusawaytoanalyzethecodebundlesthataregenerated.

Openthepackage.jsonfileoftheappandinthescriptssectionaddthose3newcommands:

"analyze":"cross-envANALYZE=truenextbuild",

"analyze:server":"cross-envBUNDLE_ANALYZE=servernextbuild",

"analyze:browser":"cross-envBUNDLE_ANALYZE=browsernextbuild"

Likethis:

{

"name":"firstproject",

"version":"1.0.0",

"description":"",

"main":"index.js",

"scripts":{

"dev":"next",


"start":"nextstart",

"analyze":"cross-envANALYZE=truenextbuild",

"analyze:server":"cross-envBUNDLE_ANALYZE=servernextbuild"

,

"analyze:browser":"cross-envBUNDLE_ANALYZE=browsernextbui

ld"

},

"keywords":[],

"author":"",

"license":"ISC",

"dependencies":{

"next":"^9.1.2",

"react":"^16.11.0",


91

"react-dom":"^16.11.0"

}

}

theninstallthose2packages:

npminstall--devcross-env@next/bundle-analyzer

Createa next.config.jsfileintheprojectroot,withthiscontent:

constwithBundleAnalyzer=require('@next/bundle-analyzer')({

enabled:process.env.ANALYZE==='true'

})

module.exports=withBundleAnalyzer({})

Nowrunthecommand

npmrunanalyze


92

Thisshouldopen2pagesinthebrowser.Onefortheclientbundles,andonefortheserverbundles:


93


94

Thisisincrediblyuseful.Youcaninspectwhat'stakingthemostspaceinthebundles,andyoucanalsousethesidebartoexcludebundles,foraneasiervisualizationofthesmallerones:


95


96

LazyloadingmodulesBeingabletovisuallyanalyzeabundleisgreatbecausewecanoptimizeourapplicationveryeasily.

SayweneedtoloadtheMomentlibraryinourblogposts.Run:

npminstallmoment

toincludeitintheproject.

Nowlet'ssimulatethefactweneeditontwodifferentroutes: /blogand /blog/[id].

Weimportitin pages/blog/[id].js:

importmomentfrom'moment'

...

constPost=props=>{

return(

<div>


<p>Publishedon{moment().format('ddddDMMMMYYYY')}</p>


</div>

)

}

I'mjustaddingtoday'sdate,asanexample.

ThiswillincludeMoment.jsintheblogpostpagebundle,asyoucanseebyrunning npmrunanalyze:

Lazyloadingmodules

97

Seethatwenowhavearedentryin /blog/[id],theroutethatweaddedMoment.jsto!

Itwentfrom~1kBto350kB,quiteabigdeal.AndthisisbecausetheMoment.jslibraryitselfis349kB.

Theclientbundlesvisualizationnowshowsusthatthebiggerbundleisthepageone,whichbeforewasverylittle.And99%ofitscodeisMoment.js.

Lazyloadingmodules

98

Everytimeweloadablogpostwearegoingtohaveallthiscodetransferredtotheclient.Whichisnotideal.

Onefixwouldbetolookforalibrarywithasmallersize,asMoment.jsisnotknownforbeinglightweight(especiallyoutoftheboxwithallthelocalesincluded),butlet'sassumeforthesakeoftheexamplethatwemustuseit.

Lazyloadingmodules

99

WhatwecandoinsteadisseparatingalltheMomentcodeinaseparatebundle.

How?InsteadofimportingMomentatthecomponentlevel,weperformanasyncimportinside getInitialProps,andwecalculatethevaluetosendtothecomponent.Rememberthatwecan'treturncomplexobjectsinsidethe getInitialProps()returnedobject,sowecalculatethedateinsideit:


constPost=props=>{

return(

<div>


<p>Publishedon{props.date}</p>


</div>

)

}

Post.getInitialProps=async({query})=>{

constmoment=(awaitimport('moment')).default()

return{

date:moment.format('ddddDMMMMYYYY'),


}

}

exportdefaultPost

Seethatspecialcallto .default()after awaitimport?It'sneededtoreferencethedefaultexportinadynamicimport(seehttps://v8.dev/features/dynamic-import)

Nowifwerun npmrunanalyzeagain,wecanseethis:

Lazyloadingmodules

100

https://v8.dev/features/dynamic-import

Our /blog/[id]bundleisagainverysmall,asMomenthasbeenmovedtoitsownbundlefile,loadedseparatelybythebrowser.

Lazyloadingmodules

101

WheretogofromhereThereisalotmoretoknowaboutNext.js.Ididn'ttalkaboutmanagingusersessionswithlogin,serverless,managingdatabases,andsoon.

ThegoalofthisHandbookisnottoteachyoueverything,butinsteaditaimstointroduceyou,gradually,toallthepowerofNext.js.

ThenextstepIrecommendistotakeagoodreadattheNext.jsofficialdocumentationtofindoutmoreaboutallthefeaturesandfunctionalityIdidn'ttalkabout,andtakealookatalltheadditionalfunctionalitiesintroducedbyNext.jsplugins,someofwhichareprettyamazing.

Wheretogofromhere

102

https://nextjs.org/docs

https://github.com/zeit/next-plugins

table of contents - topidesta.files.wordpress.com · first, the page takes longer to become visible...

Documents