[React] Create & Deploy a Universal React App using Zeit Next
2016-12-06 01:27
495 查看
In this lesson, we'll use
Setup:
Install:
Scripts:
Create pages/index.js file:
Run:
Then you can see the index.js page on the localhost:3000.
Add another page:
This can show whether the page is rendered from the server side or clinet side.
Create a nav component to do the rounting:
Then import to home page and about page.
Then we can create an .npmignore to ignore the .next folder in the root.
Last using 'now' to deploy the page to now.
nextto create a universal React application with no configuration. We'll create page components that will render on the server if accessed directly, but function as you would expect in the client. We'll use the routing capabilities included with
nextto create links between the components using
pushStateand we'll incorporate our own React component. Finally, we'll deploy the application to
nowwith 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:
import React from 'react'; export default () => ( <div> <h1>Hello next!!</h1> </div> )
Run:
npm run dev
Then you can see the index.js page on the localhost:3000.
Add another page:
import React from 'react'; export default class About extends React.Component { static getInitialProps({req}) { const name = req ? 'server': 'client'; return { name: name }; } render() { return ( <div> <h1>ABOUT PAGE</h1> <span> This page is rendering from {this.props.name} </span> </div> ); } }
This can show whether the page is rendered from the server side or clinet side.
Create a nav component to do the rounting:
// compoennts/nav.js import React from 'react'; import Link from 'next/link'; export default () => ( <div> <Link href="/">Home</Link> {' '} <Link href="/about">About</Link> </div> )
Then import to home page and about page.
// index.js import React from 'react'; import Link from 'next/link'; import Nav from '../components/nav'; export default () => ( <div> <h1>Hello next!!</h1> <Nav></Nav> </div> )
Then we can create an .npmignore to ignore the .next folder in the root.
Last using 'now' to deploy the page to now.
相关文章推荐
- Siebel Tools: Create new LOV Type and Values & Create Static Picklist Using Tools
- how to create colored 3D Objects using the OpenGL® ES cross-platform API.
- Tomcat --> Cannot create a server using the selected type
- Tomcat --> Cannot create a server using the selected type
- USING PARTED ON > 2TB DRIVES TO CREATE NEW PARTITIONS FOR LVM
- Create a Slick Tabbed Content Area using CSS & jQuery
- javax.jdo.JDOFatalDataStoreException: Failed to create database 'metastore_db', see the next excepti
- iOS Tutorial: Create iPhone video chat app using Parse and Opentok (tokbox)
- Tomcat --> Cannot create a server using the selected type
- How to create a Maven web app and deploy to Tomcat - fast
- Tomcat --> Cannot create a server using the selected type
- Cannot create PoolableConnectionFactory (Access denied for user 'root'@'localhost' (using password:
- How to create a Maven web app and deploy to Tomcat - fast
- Tomcat --> Cannot create a server using the selected type
- Learning MySQL 1 - create database & tables using specified charset
- Siebel Tools: Create new LOV Type and Values & Create Static Picklist Using Tools
- Using Create directory & UTL_FILE in Oracle
- metro App 错误"Cannot deploy to path:/……“ 和错误 1 错误 : DEP0700
- Tomcat --> Cannot create a server using the selected type
- How to create a Maven web app and deploy to Tomcat - fast