From 3812905b4d906c3128e866e72243981bdd55ff42 Mon Sep 17 00:00:00 2001 From: Cesar Cruz Date: Fri, 14 Aug 2020 21:48:53 -0700 Subject: [PATCH 1/2] Added Next.js configuration info to docs --- docs/Webpack.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/docs/Webpack.md b/docs/Webpack.md index bf554376f..7dc0b4450 100644 --- a/docs/Webpack.md +++ b/docs/Webpack.md @@ -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. From f40ea6aed88ad60930844ad84eecfc87a5695f31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9sar?= Date: Tue, 25 Aug 2020 16:01:42 -0700 Subject: [PATCH 2/2] Update docs/Webpack.md Co-authored-by: Artem Sapegin --- docs/Webpack.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/Webpack.md b/docs/Webpack.md index 7dc0b4450..fcf956999 100644 --- a/docs/Webpack.md +++ b/docs/Webpack.md @@ -78,7 +78,7 @@ module.exports = { ## Next.js -The [Next.js](https://nextjs.org/) framework abstracts away Webpack for you, but it still uses Webpack under the hood. +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: