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

Update README.md

This commit is contained in:
Guillermo Rauch 2016-12-17 11:03:53 -08:00 committed by GitHub
parent 5ab7463b93
commit 6a4fbd8e50

View file

@ -287,60 +287,28 @@ Note: we recommend putting `.next` in `.npmignore` or `.gitignore`. Otherwise, u
## Configuration ## Configuration
While Next.js aims to work without any configuration, sometimes there is a need to add custom behaviour. For custom advanced behavior of Next.js, you can create a `next.config.js` in the root of your project directory (next to `pages/` and `package.json`).
You can define custom configuration in a file called `next.config.js` in the project root directory.
An example of a configuration looks like this: Note: `next.config.js` is a regular Node.js module, not a JSON file. It gets used by the Next server and build phases, and not included in the browser build.
```javascript ```javascript
// next.config.js // next.config.js
module.exports = { module.exports = {
cdn: true /* config options here */
} }
``` ```
### Customizing webpack config ### Customizing webpack config
Sometimes the user needs to have custom configuration for webpack to add a specific behaviour in the build process. In order to extend our usage of `webpack`, you can define a function that extends its config.
An example of this is using `eslint-loader` to lint the files before compiling. This can be done by defining
`webpack` in the config.
```javascript The following example shows how you can use [`react-svg-loader`](https://github.com/boopathi/react-svg-loader) to easily import any `.svg` file as a React component, without modification.
```js
module.exports = { module.exports = {
webpack: (webpackConfig, { dev }) => { webpack: (cfg, { dev }) => {
webpackConfig.module.preLoaders.push({ test: /\.js$/, loader: 'eslint-loader' }) cfg.module.rules.push({ test: /\.svg$/, loader: 'babel!react-svg' })
return webpackConfig return cfg
}
}
```
As you can see you need to provide a function which has two parameters `webpackConfig`, which is the config used by Next.js, and `options`, which contains
`dev` (`true` if dev environment). The config you return is the config used by Next.js.
You can also return a `Promise` which will be resolved first.
_NOTE: Use this option with care, because you can potentially break the existing webpack build configuration by using this option._
These are some more examples:
```javascript
const I18nPlugin = require('i18n-webpack-plugin');
module.exports = {
webpack: (webpackConfig, { dev }) => {
// Read image files:
webpackConfig.module.loaders.push({
test: /\.png$/,
loader: 'file'
})
// Adding a plugin
webpackConfig.plugins.push(new I18nPlugin())
// Or adding an alias
// Create webpackConfig.resolve.alias if it doesn't exist yet:
webpackConfig.resolve.alias = webpackConfig.resolve.alias || {}
webpackConfig.resolve.alias.src = './src'
return webpackConfig
} }
} }
``` ```