[React] Create & Deploy a Universal React App using Zeit Next
Posted Answer1215
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[React] Create & Deploy a Universal React App using Zeit Next相关的知识,希望对你有一定的参考价值。
In this lesson, we‘ll use next
to 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 next
to create links between the components using pushState
and we‘ll incorporate our own React component. Finally, we‘ll deploy the application to now
with 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.
以上是关于[React] Create & Deploy a Universal React App using Zeit Next的主要内容,如果未能解决你的问题,请参考以下文章
创建 React App (不弹出) & ANTD Design & SCSS & Create App Rewired config
在 Google App Engine 上部署 create-react-app