React Server Rendering (SSR) framework next.js

Official website: Nextjs.org/

Deom:github.com/xutongbao/h…

index.js:

import Layout from '.. /components/MyLayout.js'
import Link from 'next/link'
import fetch from 'isomorphic-unfetch'

const Index = (props) = > (
  <Layout>
    <h1>Batman TV Shows</h1>
    <ul>
      {props.shows.map(({show}) => (
        <li key={show.id}>
          <Link as={` /p/ ${show.id} `}href={` /post?id=${show.id}`} >
            <a>{show.name}</a>
          </Link>
        </li>
      ))}
    </ul>
  </Layout>
)

Index.getInitialProps = async function() {
  const res = await fetch('https://api.tvmaze.com/search/shows?q=batman')
  const data = await res.json()

  console.log(`Show data fetched. Count: ${data.length}`)

  return {
    shows: data
  }
}

export default Index
Copy the code

about.js:

import Layout from '.. /components/MyLayout.js'

export default() = > (<Layout>
       <p>This is the about page</p>
    </Layout>
)
Copy the code

post.js:

import Layout from '.. /components/MyLayout.js'
import fetch from 'isomorphic-unfetch'

const Post =  (props) = > (
    <Layout>
       <h1>{props.show.name}</h1>
       <p>{props.show.summary.replace(/<[/]? p>/g, '')}</p>
       <img src={props.show.image.medium}/>
    </Layout>
)

Post.getInitialProps = async function (context) {
  const { id } = context.query
  const res = await fetch(`https://api.tvmaze.com/shows/${id}`)
  const show = await res.json()

  console.log(`Fetched show: ${show.name}`)

  return { show }
}

export default Post
Copy the code

Header.js:

import Link from 'next/link'
const linkStyle = {
  marginRight: 15
}

const Header = () = > (
  <div>
    <Link href="/">
      <a style={linkStyle}>Home</a>
    </Link>
    <Link href="/about">
      <a style={linkStyle}>About</a>
    </Link>
  </div>
)

export default Header
Copy the code

MyLayout.js:

import Header from './Header'

const layoutStyle = {
  margin: 20.padding: 20.border: '1px solid #DDD'
}

const Layout = (props) = > (
  <div style={layoutStyle}>
    <Header />
    {props.children}
  </div>
)

export default Layout
Copy the code

server.js:

const express = require('express')
const next = require('next')

constdev = process.env.NODE_ENV ! = ='production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare()
.then(() = > {
  const server = express()

  server.get('/p/:id'.(req, res) = > {
    const actualPage = '/post'
    const queryParams = { id: req.params.id } 
    app.render(req, res, actualPage, queryParams)
  })

  server.get(The '*'.(req, res) = > {
    return handle(req, res)
  })

  server.listen(3000.(err) = > {
    if (err) throw err
    console.log('> Ready on http://localhost:3000')
  })
})
.catch((ex) = > {
  console.error(ex.stack)
  process.exit(1)})Copy the code

package.json:

{
  "name": "hello-next"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."dev": "node server.js"."build": "next build"."start": "NODE_ENV=production node server.js"
  },
  "keywords": []."author": ""."license": "ISC"."dependencies": {
    "express": "^ 4.16.4"."isomorphic-unfetch": "^ 3.0.0"."next": "^ 7.0.2"."react": "^ 16.6.3"."react-dom": "^ 16.6.3"}}Copy the code