mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
Add docs.
This commit is contained in:
parent
acea5aa5bf
commit
aa353f8d32
70
readme.md
70
readme.md
|
@ -39,6 +39,7 @@ Next.js is a minimalistic framework for server-rendered React applications.
|
||||||
- [Customizing babel config](#customizing-babel-config)
|
- [Customizing babel config](#customizing-babel-config)
|
||||||
- [CDN support with Asset Prefix](#cdn-support-with-asset-prefix)
|
- [CDN support with Asset Prefix](#cdn-support-with-asset-prefix)
|
||||||
- [Production deployment](#production-deployment)
|
- [Production deployment](#production-deployment)
|
||||||
|
- [Static HTML export](#static-html-export)
|
||||||
- [Recipes](#recipes)
|
- [Recipes](#recipes)
|
||||||
- [FAQ](#faq)
|
- [FAQ](#faq)
|
||||||
- [Contributing](#contributing)
|
- [Contributing](#contributing)
|
||||||
|
@ -761,6 +762,75 @@ Next.js can be deployed to other hosting solutions too. Please have a look at th
|
||||||
|
|
||||||
Note: we recommend putting `.next`, or your custom dist folder (Please have a look at ['Custom Config'](You can set a custom folder in config https://github.com/zeit/next.js#custom-configuration.)), in `.npmignore` or `.gitignore`. Otherwise, use `files` or `now.files` to opt-into a whitelist of files you want to deploy (and obviously exclude `.next` or your custom dist folder)
|
Note: we recommend putting `.next`, or your custom dist folder (Please have a look at ['Custom Config'](You can set a custom folder in config https://github.com/zeit/next.js#custom-configuration.)), in `.npmignore` or `.gitignore`. Otherwise, use `files` or `now.files` to opt-into a whitelist of files you want to deploy (and obviously exclude `.next` or your custom dist folder)
|
||||||
|
|
||||||
|
## Static HTML export
|
||||||
|
|
||||||
|
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 dyanmic urls, prefetching, preloading and dynamic imports.
|
||||||
|
|
||||||
|
### Usage
|
||||||
|
|
||||||
|
Simply develop your app as you normally do with Next.js. Then create a custom Next.js [config](https://github.com/zeit/next.js#custom-configuration) as shown below:
|
||||||
|
|
||||||
|
```js
|
||||||
|
// next.config.js
|
||||||
|
module.exports = {
|
||||||
|
exportPathMap: function () {
|
||||||
|
return {
|
||||||
|
"/": { page: "/" },
|
||||||
|
"/about": { page: "/about" },
|
||||||
|
"/p/hello-nextjs": { page: "/post", query: { title: "hello-nextjs" } },
|
||||||
|
"/p/learn-nextjs": { page: "/post", query: { title: "learn-nextjs" } },
|
||||||
|
"/p/deploy-nextjs": { page: "/post", query: { title: "deploy-nextjs" } }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
In that, you specify what are the pages you need to export as static HTML.
|
||||||
|
|
||||||
|
Then simply run these commands:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
next build
|
||||||
|
next export
|
||||||
|
```
|
||||||
|
|
||||||
|
For that you may need to add a NPM script to `package.json` like this:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"scripts": {
|
||||||
|
"build": "next build && next export"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
And run it at once with:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
Then you've a static version of your app in the “out" directory.
|
||||||
|
|
||||||
|
> You can also customize the output directory. For that run `next export -h` for the help.
|
||||||
|
|
||||||
|
Now you can deploy that directory to any static hosting service.
|
||||||
|
|
||||||
|
For an example, simply visit the “out” directory and run following command to deploy your app to [ZEIT now](https://zeit.co/now).
|
||||||
|
|
||||||
|
```sh
|
||||||
|
now
|
||||||
|
```
|
||||||
|
|
||||||
|
### Limitation
|
||||||
|
|
||||||
|
With next export, we build HTML version of your app when you run the command `next export`. In that time, we'll run the `getInitialProps` functions of your pages.
|
||||||
|
|
||||||
|
So, you could only use `pathname`, `query` and `asPath` fields of the `context` object passed to `getInitialProps`. You can't use `req` or `res` fields.
|
||||||
|
|
||||||
|
> Basically, you won't be able to render HTML content dynamically as we pre-build HTML files. If you need that, you need run your app with `next start`.
|
||||||
|
|
||||||
|
|
||||||
## Recipes
|
## Recipes
|
||||||
|
|
||||||
- [Setting up 301 redirects](https://www.raygesualdo.com/posts/301-redirects-with-nextjs/)
|
- [Setting up 301 redirects](https://www.raygesualdo.com/posts/301-redirects-with-nextjs/)
|
||||||
|
|
Loading…
Reference in a new issue