An example that shows how to integrate React-Toolbox in a Next.js App
Contents
Getting Started / Installation
Clone this repo
git clone https://github.com/ooade/next-react-toolbox.git
cd next-react-toolbox
Install Dependencies
yarn
or
npm install
Usage
How it works
Webpack handles the loading of css and styles to the page. With ExtractTextPlugin, we were able to place each css file in the designated directory (css); In development, we place just a file (style.css) unminified while in production, we split them up by page name (for each page, a css file is generated at build time).
We use webpack-assets-manifest plugin to keep track of only our css files thereby creating a css-manifest.json file.
Thanks to the power of css-modules-require-hook, we were able to make our css files recognizable by our server with a matching localIdentName as used in our css-loader.
Our CSS files are injected to the page by the library we created lib/StyleSheet which takes a pathname.
Run it
It's simple.
yarn run dev
or
npm run dev
P.S: You can change/add to React-ToolBox variables in the postcss.config.js file, even after running the app, it works! 😄
Usage in a non-nextjs App
How to follow this repo pattern in a non-nextjs environment. It's easy, just make sure you have this on your server:
const cssModulesHook = require('css-modules-require-hook');
cssModulesHook({
generateScopedName: '[local]__[hash:base64:3]'
});And wherever you have the SSR logic, include the StyleSheet library.
P.S: You will have to strip off the ".next" paths and also replace bundles/pages${path}.js.css to wherever the stylesheet(s) are being generated to.
Deployment
now
or follow this guide to deploy to heroku
Tips
Contribute some ;)
You can reach out to me on Twitter, and don't forget to star this project. Thanks!
License
MIT