Skip to content

Commit

Permalink
docs: Add Next.js configuration info to docs (#1665)
Browse files Browse the repository at this point in the history
  • Loading branch information
César committed Aug 26, 2020
1 parent e915e72 commit 7cefb48
Showing 1 changed file with 20 additions and 0 deletions.
20 changes: 20 additions & 0 deletions docs/Webpack.md
Expand Up @@ -76,6 +76,26 @@ module.exports = {

[Create React App](https://github.com/facebook/create-react-app) is supported out of the box, you don’t even need to create a style guide config if your components could be found using a default pattern: all files with `.js` or `.jsx` extensions inside `src/components` or `src/Components` folders.

## Next.js

The [Next.js](https://nextjs.org/) framework abstracts away webpack for you, but it still uses webpack under the hood.

After configuring your webpack loaders in `styleguide.config.js` you will need to also configure Babel. First install all the required Babel dependencies:

```bash
npm install --save-dev babel-loader @babel/core @babel/preset-react
```

Next, you'll want to configure Babel to use the appropriate presets, here is an example `.babelrc` file:

```json
{
"presets": ["@babel/preset-react"]
}
```

That's it, notice that we don't need to install webpack as it's already included by Next.js.

## Non-webpack projects

To use features, not supported by browsers, like JSX, you’ll need to compile your code with Babel or another tool.
Expand Down

0 comments on commit 7cefb48

Please sign in to comment.