How to make custom configurations
In a nutshell, all Next.js configurations are done via next.config.js
. With Next.js 5, this became even easier.
Let's create an empty project for experiments:
$ npm init $ npm install react react-dom
Let's add SASS
support as an example:
$ npm install next node-sass @zeit/next-sass --save-dev
Enhance the scripts
section of package.json
:
// package.json { "scripts": { "start": "next" } }
Next, we again have to create a custom document (the same as before):
// pages/_document.js import Document, {Head, Main, NextScript} from 'next/document'; export default class MyDocument extends Document { render() { return ( <html> <Head> <title>NextJS Condensed</title> <link rel="stylesheet" href="/_next/static/style.css"/> </Head> <body> <Main/> <NextScript/> </body> </html> ) } }
Note
We're using the Next.js proprietary URL prefix for static files, /_next/static/
, which...