mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
Add with-static-export example (#2234)
This commit is contained in:
parent
75de0fa5fa
commit
2b9944bf52
23
examples/with-static-export/README.md
Normal file
23
examples/with-static-export/README.md
Normal 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
11
examples/with-static-export/components/post.js
Normal 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
26
examples/with-static-export/next.config.js
Normal 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
19
examples/with-static-export/package.json
Normal 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
30
examples/with-static-export/pages/index.js
Normal 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
31
examples/with-static-export/pages/post.js
Normal 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
27
examples/with-static-export/server.js
Normal 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')
|
||||
})
|
||||
})
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue