Universal Webpack

[timneutkens]

• Support for nearly all loaders in the webpack ecosystem. Fixes React Alias #1564, Universal Webpack or universal Babel #1245, FaviconsWebpackPlugin won't generate icons, inject them into head #3068, eslint-loader doesn't appear to be respected #3241, hot-reloader with stylelint-webpack-plugin causes unhandled exception #3560, Custom Webpack Config warning in README #3318, Not loading Font Awesome fonts on other routes #3203, External stylesheet loads only partly. #3597
• CSS / SASS / LESS support, css-modules is also support with a flag. Fixes Working with external css and scss files #3131, with-global-stylesheet-simple < multiple files #3239, Extracted static stylesheet file into header #2534, How to minimize css when import to comoponent? #3465, isomorphic-style-loader example #1615, use with-external-scoped-css dont support import css in need?  #3143, Need update in example code about external stylesheet #2413, Working with external css and scss files #3131, Can't build application with sass files, which are working on development #3519, The example "with-external-scoped-css" works randomly  #3276, @font-face SyntaxError: Invalid or unexpected token #3408
• Support for custom extensions. Pages are still restricted to the core defined extensions though, which are: .js,.jsx,.ts,.tsx Fixes Custom extensions with priority #3445, Allow custom extensions (.ts .tsx .jsx) #2391
• Typescript support. Fixes TypeScript JSX support for _document #3511, Allow custom extensions (.ts .tsx .jsx) #2391, dynamic imports not working with typescript #3389, use typescript and styled-jsx-plugin-postcss error. #3124
• Support for preact and any other React clone that supports server side rendering. Fixes React Alias #1564
• External source maps opt-in in production. Fixes Production Source Maps #1903.
• Latest version of react-hot-loader

I'm going to add more issues here whenever I come across one fitting this pull request.

Webpack for Client / Server Side

Webpack is now being used to transpile the server side code too. This new feature is mostly backwards compatible. The main user facing difference is that webpack in next.config.js is now being ran twice, once for the server and once for the client allowing configuration to differ for client and server rendering. This differentiation is marked by a new property isServer passed to the webpack function. All properties are outlined below:

module.exports = {
  webpack: (config, {dir, dev, isServer, buildId, config, defaultLoaders}) => {
	  return config
  }
}

CSS / SASS / LESS

For importing .css .scss or .less we’ve created modules which have sane defaults for server side rendering.

# css support
yarn add @zeit/next-css

// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS()

CSS modules

Optionally you can enable css modules using cssModules: true , which works with withSass and withLess too.

// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
	cssModules: true
})

sass support

npm install --save @zeit/next-sass node-sass

// next.config.js
const withSass = require('@zeit/next-sass')
module.exports = withSass()

less support

npm install --save @zeit/next-less less

// next.config.js
const withLess = require('@zeit/next-less')
module.exports = withSass()

Typescript

npm install --save @zeit/next-typescript typescript

Create a next.config.js

// next.config.js
const withTypescript = require('@zeit/next-typescript')
module.exports = withTypescript()

Then create a tsconfig.json in your project

{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "allowJs": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": false,
    "preserveConstEnums": true,
    "sourceMap": true,
    "skipLibCheck": true,
    "baseUrl": ".",
    "typeRoots": [
      "./node_modules/@types"
    ],
    "lib": [
      "dom",
      "es2015",
      "es2016"
    ]
  }
}

Create pages in the pages directory

// pages/index.tsx
export default () => <div>Hello World</div>

preact

With universal webpack and the upgrade to react-hot-loader v4 preact is now easily configured

// next.config.js
const withPreact = require('@zeit/next-preact')
module.exports = withPreact()

// server.js
require('@zeit/next-preact/alias')()
const { createServer } = require('http')
const next = require('next')


const app = next({ dev: process.env.NODE_ENV !== 'production' })
const handle = app.getRequestHandler()

app.prepare()
.then(() => {
  createServer(handle)
  .listen(port, () => {
    console.log(`> Ready on http://localhost:${port}`)
  })
})

Source Maps

Next is configured to serve the .js.map route for bundled files. You can enable them in production using next.config.js

module.exports = {
  webpack: (config, {dev}) => {
    // In development sourcemaps are handled automatically
    if(!dev) {
	    config.devtool = 'source-map'
    }

    return config
  }
}

[mgiraldo]

wow this is great! i'm trying to get the scss to work. the links in the readme point to a private (?) repo so i can't find an example snippet. i already added this to my next.config.js and i dont get any errors but i also dont get the css when i import the sass files:

const withSass = require("@zeit/next-sass");

module.exports = withSass({
  cssModules: true
});

[mgiraldo]

never mind, i had forgotten to add <style dangerouslySetInnerHTML={{ __html: stylesheet }} />. does this sass support need a special test entry in config.module.rules? for some reason $variables are not being parsed.

[Nostrus]

For me the same config of @mgiraldo fails and not sure why, getting this error:

Using "webpack" config function defined in next.config.js.
TypeError: Cannot set property 'sass' of undefined

[timneutkens]

Note that this is not released just yet. Only merged into the canary branch. I'll make the next-plugins more resilient against older versions so that they'll error out 👍 Keep an eye out for https://github.com/zeit/next.js/releases 🙏

[sudazzle]

Using "webpack" config function defined in next.config.js.
TypeError: Cannot set property 'sass' of undefined

I am getting the same issue. "next": "^4.2.3". I tried with "next": "^4.4.0-canary.3" as well, got the same error

[julkue]

@timneutkens It seems that this PR is about an issue I've just encountered while importing a .css file. I've followed this guide of your official repo and received:

> Using "webpack" config function defined in next.config.js.
TypeError: Cannot set property 'css' of undefined

Will the next release (with this PR) fix the issue?

[anttoon]

Looks like options.defaultLoaders is undefined in index.js:
A quick does not fix it either options.defaultLoaders = options.defaultLoaders || {};
It won't recognise css as a module. Some preprocessor is missing. (css module)

[timneutkens]

Note that this is not released just yet. as said above

[julkue]

@timneutkens I know, that's why I asked:

Will the next release (with this PR) fix the issue?

[zachary95]

Of course @julmot, ZEIT team won't release things with known issues. Just let them finish their work and please file an issue if you encounter any problems when this will be officially released. 💟

[julkue]

@Thesuperfly I wasn't thinking so. I'm interested if the thing I was mentioning is covered in this PR. That's all. And my question is still open.

[mgiraldo]

i guess you should wait for the release and see then, @julmot

[timneutkens]

@julmot to answer your question. Yes. I've also updated all next-plugins with a check for v5+ so that they error out till the work in this PR is released.

Just a few more things 🙏Thanks for your patience!

[ilionic]

Congrats on release! Any plans for .styl stylus support?

[timneutkens]

@ilionic feel free to create a plugin in github.com/zeit/next-plugins. You can almost copy-paste the sass or less one.

[fidellr]

i'm trying to use css and scss simultaneously (especially for ant-d usecase), i duplicate cssLoaderConfig to handle scss and css, and it compiled successfully into style.css inside _next/static/ compiled folder, but i got an error that said Invalid or unexpected token /pwa-ssr/node_modules/antd/lib/style/index.css:6 @font-face { ^, any thought @timneutkens ?

[fidellr]

it seems can't understand what @ are before the font-face css

[timneutkens]

Sounds like the loader isn't being applied. Either way not a Next.js issue, since we don't do anything related to styles in Next. I'm guessing it's because of something specific with antd and css-loader 🤔

[gihrig]

@font-face rule works for me...

"next": "5.1.0",
"@zeit/next-css": "0.1.5",

next.config.js

module.exports = withCSS({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
  },