Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Next.js configuration info to docs #1665

Merged
merged 2 commits into from
Aug 26, 2020
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions docs/Webpack.md
Original file line number Diff line number Diff line change
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