In this lesson, we'll use the next
create a universal React application with no configuration. We'll create page components that would render on the server if accessed directly, but function as you would expect in the Client. We ll use the routing capabilities included with to next
create links between the components using and pushState
we ll Incorp Orate our own React component. Finally, we'll deploy the application to with now
a simple command in the terminal.
Setup:
NPM init-y
Install:
NPM I--save-dev Next
Scripts:
"Scripts": { "Dev":"Next", "Start":"Next Start", "Build":"Next Build" },
Create pages/index.js File:
from ' react ' Default () = ( <div> )
Run:
NPM Run Dev
Then you can see the Index.js page on the localhost:3000.
ADD another page:
Import React from 'react'; exportdefault classAbout extends React.component {Staticgetinitialprops ({req}) {ConstName = req?'Server':'Client'; return{name:name}; } render () {return ( <div> This page isRendering from{ This. Props.name}</span> </div> ); }}
This can show whether the page are rendered from the server side or clinet side.
Create A nav component to do the rounting:
//Compoennts/nav.jsImport React from 'react'; import Link from 'Next/link'; exportdefault() = ( <div> <link href="/">Home</Link> {' '} <link href="/about">About</Link> </div>)
Then import the to home page and the About page.
//Index.jsImport React from 'react'; import Link from 'Next/link'; import Nav from '.. /components/nav'; exportdefault() = ( <div> )
Then we can create a. Npmignore to ignore the. Next folder in the root.
Last using "Now" to deploy the page to now.
Github
[React] Create & Deploy A Universal React App using Zeit Next