├── .gitignore ├── logo.png ├── pages ├── index.js ├── _document.js └── bazinga.js ├── postcss.config.js ├── lib └── StyleSheet.js ├── server.js ├── package.json ├── LICENSE ├── next.config.js ├── components └── header.js ├── README.md └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .next 3 | -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ooade/next-react-toolbox/HEAD/logo.png -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import Link from 'next/link' 2 | 3 | import Header from '../components/header' 4 | import { Button } from 'react-toolbox/lib/button' 5 | 6 | export default () => ( 7 |
8 |
9 |
10 | 11 | 12 | 13 |
14 |
15 | ) 16 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | const reactToolboxVariables = { 2 | 'color-text': '#444548', 3 | /* Note that you can use global colors and variables */ 4 | 'color-primary': 'var(--palette-blue-500)', 5 | 'color-primary-dark': 'var(--palette-blue-900)', /*AppBar*/ 6 | 'preferred-font': 'Lato, Helvetica, Arial, sans-serif', 7 | }; 8 | 9 | module.exports = { 10 | plugins: [ 11 | require('postcss-cssnext')({ 12 | features: { 13 | customProperties: { 14 | variables: reactToolboxVariables, 15 | }, 16 | }, 17 | }), 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /lib/StyleSheet.js: -------------------------------------------------------------------------------- 1 | export const globalStyleSheet = () => { 2 | try { 3 | return fs.readFileSync('.next/css/commons.css'); 4 | } catch (e) { /* No file */ } 5 | } 6 | 7 | export default(path) => { 8 | const options = { 9 | // Used in production 10 | cssPath: `.next/css${path === '/' ? '/index' : path}.css`, 11 | // Used in development 12 | stylePath: '.next/css/style.css' 13 | } 14 | 15 | try { 16 | if (process.env.NODE_ENV !== 'production') { 17 | return fs.readFileSync(options.stylePath); 18 | } else { 19 | return fs.readFileSync(options.cssPath); 20 | } 21 | } catch (e) { /* No file */ } 22 | } 23 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const path = require('path'); 3 | const next = require('next'); 4 | 5 | const dev = process.env.NODE_ENV !== 'production'; 6 | const app = next({ dir: '.', dev }); 7 | const handle = app.getRequestHandler(); 8 | 9 | const cssModulesHook = require('css-modules-require-hook'); 10 | 11 | cssModulesHook({ 12 | generateScopedName: '[local]__[hash:base64:3]' 13 | }); 14 | 15 | app.prepare() 16 | .then(_ => { 17 | const server = express(); 18 | 19 | server.get('*', (req, res) => handle(req, res)); 20 | 21 | server.listen(3000, err => { 22 | if (err) throw error; 23 | 24 | console.log('> App running on port 3000'); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "next.js-with-react-toolbox", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "dev": "node server", 7 | "build": "next build", 8 | "start": "NODE_ENV=production node server" 9 | }, 10 | "author": "Ademola Adegbuyi ", 11 | "license": "MIT", 12 | "dependencies": { 13 | "css-modules-require-hook": "^4.0.6", 14 | "express": "^4.15.2", 15 | "next": "2.4.1", 16 | "react": "^15.4.2", 17 | "react-dom": "^15.4.2", 18 | "react-toolbox": "^2.0.0-beta.8" 19 | }, 20 | "devDependencies": { 21 | "css-loader": "^0.28.0", 22 | "extract-text-webpack-plugin": "^2.1.0", 23 | "postcss-cssnext": "^2.10.0", 24 | "postcss-loader": "^1.3.3", 25 | "style-loader": "^0.16.1" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /pages/_document.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Document, { Head, Main, NextScript } from 'next/document'; 3 | import styleSheet, { globalStyleSheet } from '../lib/StyleSheet'; 4 | 5 | export default class MyDocument extends Document { 6 | static async getInitialProps({ pathname, renderPage }) { 7 | const page = renderPage(); 8 | 9 | const styles = [ 10 |