next.js

server.js

const express = require('express')

const next = require('next')

const dev = 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('*', (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)

})

-------------------------------------------

pages/index.js

import Layout from '../components/layout'

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

----------------------------------------

pages/post.js

import {withRouter} from 'next/router'

import Layout from '../components/layout'

const Page = withRouter((props) => (

    <Layout>

       <h1>{props.show.name}</h1>

       <p>{props.show.summary.replace(/<[/]?p>/g, '')}</p>

       <img src={props.show.image.medium}/>

    </Layout>

))

Page.getInitialProps = async function (context) {

    console.log(context.query);

    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 Page

---------------------------------------

components/layout.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

-----------------------------------------

components/header

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

------------------------------------------

reference:

https://nextjs.org/learn

deploy node express
https://zeit.co/examples/nodejs-express/

deploy next
https://zeit.co/examples/nextjs/