[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.

 

Github

以上是关于[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

使用create-react-app创建项目——端口配置

Express、Create-React-App 和 passport-twitter

react 应用多入口 配置 && 实践总结

react 应用多入口 配置 && 实践总结