terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

Add with-static-export example (#2234)

Browse source
This commit is contained in:
Sergio Xalambrí 2017-07-01 14:44:58 -05:00 committed by Tim Neutkens
parent 75de0fa5fa
commit 2b9944bf52
8 changed files with 172 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
examples/with-static-export/README.md Normal file
View file

@ -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`.

11
examples/with-static-export/components/post.js Normal file
View file

@ -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>

26
examples/with-static-export/next.config.js Normal file
View file

@ -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: '/' }
})
}
}

19
examples/with-static-export/package.json Normal file
View file

@ -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"
},
}

30
examples/with-static-export/pages/index.js Normal file
View file

@ -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>
)
}
}

31
examples/with-static-export/pages/post.js Normal file
View file

@ -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>
)
}
}

27
examples/with-static-export/server.js Normal file
View file

@ -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')
})
})

5
readme.md
View file

@ -904,6 +904,11 @@ Note: we recommend putting `.next`, or your custom dist folder (Please have a lo
## Static HTML export ## 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. 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 ### Usage