Add with-static-export example (vercel#2234)

sergiodxa · timneutkens · commit 2b9944bf520a · 2017-07-01T21:44:58.000+02:00
diff --git a/examples/with-static-export/README.md b/examples/with-static-export/README.md
@@ -0,0 +1,23 @@
+# Static export example
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-static-export
+cd with-static-export
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+## The idea behind the example
+
+This example show how to export to static HTML files your Next.js application fetching data from an API to generate a dynamic list of pages. This use a custom Express server in development to configure custom routing and then generate a map of pages to export for production.
+
+When trying to run `npm start` it will build and export your pages into the `out` folder and serve them on `localhost:5000`.
diff --git a/examples/with-static-export/components/post.js b/examples/with-static-export/components/post.js
@@ -0,0 +1,11 @@
+import Link from 'next/link'
+
+export default props =>
+  <article>
+    <h2>{props.title}</h2>
+    <p>{props.body}</p>
+    {/* render the URL as /post/:id */}
+    <Link href={{ pathname: '/post', query: { id: props.id } }} as={`/post/${props.id}`}>
+      <a>Read more...</a>
+    </Link>
+  </article>
diff --git a/examples/with-static-export/next.config.js b/examples/with-static-export/next.config.js
@@ -0,0 +1,26 @@
+const fetch = require('isomorphic-fetch')
+
+module.exports = {
+  async exportPathMap () {
+    // we fetch our list of posts, this allow us to dynamically generate the exported pages
+    const response = await fetch('http://jsonplaceholder.typicode.com/posts?_page=1')
+    const postList = await response.json()
+
+    // tranform the list of posts into a map of pages with the pathname `/post/:id`
+    const pages = postList.reduce(
+      (pages, post) =>
+        Object.assign({}, pages, {
+          [`/post/${post.id}`]: {
+            page: '/post',
+            query: { id: post.id }
+          }
+        }),
+      {},
+    )
+
+    // combine the map of post pages with the home
+    return Object.assign({}, pages, {
+      '/': { page: '/' }
+    })
+  }
+}
diff --git a/examples/with-static-export/package.json b/examples/with-static-export/package.json
@@ -0,0 +1,19 @@
+{
+  "main": "server.js",
+  "dependencies": {
+    "express": "^4.15.3",
+    "isomorphic-fetch": "^2.2.1",
+    "next": "beta",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "serve": "^5.2.2"
+  },
+  "scripts": {
+    "dev": "node .",
+    "build": "next build",
+    "preexport": "npm run build",
+    "export": "next export",
+    "prestart": "npm run export",
+    "start": "serve out"
+  },
+}
diff --git a/examples/with-static-export/pages/index.js b/examples/with-static-export/pages/index.js
@@ -0,0 +1,30 @@
+import { Component } from 'react'
+import Head from 'next/head'
+import fetch from 'isomorphic-fetch'
+
+import Post from '../components/post'
+
+export default class extends Component {
+  static async getInitialProps () {
+    // fetch list of posts
+    const response = await fetch('http://jsonplaceholder.typicode.com/posts?_page=1')
+    const postList = await response.json()
+    return { postList }
+  }
+
+  render () {
+    return (
+      <main>
+        <Head>
+          <title>Home page</title>
+        </Head>
+
+        <h1>List of posts</h1>
+
+        <section>
+          {this.props.postList.map(post => <Post {...post} key={post.id} />)}
+        </section>
+      </main>
+    )
+  }
+}
diff --git a/examples/with-static-export/pages/post.js b/examples/with-static-export/pages/post.js
@@ -0,0 +1,31 @@
+import { Component } from 'react'
+import Link from 'next/link'
+import Head from 'next/head'
+import fetch from 'isomorphic-fetch'
+
+export default class extends Component {
+  static async getInitialProps ({ query }) {
+    // fetch single post detail
+    const response = await fetch(`http://jsonplaceholder.typicode.com/posts/${query.id}`)
+    const post = await response.json()
+    return { ...post }
+  }
+
+  render () {
+    return (
+      <main>
+        <Head>
+          <title>{this.props.title}</title>
+        </Head>
+
+        <h1>{this.props.title}</h1>
+
+        <p>{this.props.body}</p>
+
+        <Link href='/'>
+          <a>Go back to home</a>
+        </Link>
+      </main>
+    )
+  }
+}
diff --git a/examples/with-static-export/server.js b/examples/with-static-export/server.js
@@ -0,0 +1,27 @@
+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()
+
+  // custom route for posts
+  server.get('/post/:id', (req, res) => {
+    return app.render(req, res, '/post', {
+      id: req.params.id
+    })
+  })
+
+  server.get('*', (req, res) => {
+    return handle(req, res)
+  })
+
+  server.listen(3000, (err) => {
+    if (err) throw err
+    console.log('> Ready on http://localhost:3000')
+  })
+})
diff --git a/readme.md b/readme.md
@@ -904,6 +904,11 @@ Note: we recommend putting `.next`, or your custom dist folder (Please have a lo
 
 ## Static HTML export
 
+<p><details>
+  <summary><b>Examples</b></summary>
+  <ul><li><a href="./examples/with-static-export">Static export</a></li></ul>
+</details></p>
+
 This is a way to run your Next.js app as a standalone static app without any Node.js server. The export app supports almost every feature of Next.js including dynamic urls, prefetching, preloading and dynamic imports.
 
 ### Usage
