CSS plugin installed and set.

next.config.js

@@ -0,0 +1,4 @@
+const withCSS = require('@zeit/next-css')
+module.exports = withCSS({
+  cssModules: true
+})

package-lock.json

@@ -1143,6 +1143,126 @@
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
     },
+    "@zeit/next-css": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@zeit/next-css/-/next-css-1.0.1.tgz",
+      "integrity": "sha512-yfHPRy/ne/5SddVClsoy+fpU7e0Cs1gkWA67/wm2uIu+9rznF45yQLxHEt5dPGF3h6IiIh7ZtIgA8VV8YKq87A==",
+      "requires": {
+        "css-loader": "1.0.0",
+        "extracted-loader": "1.0.4",
+        "find-up": "2.1.0",
+        "ignore-loader": "0.1.2",
+        "mini-css-extract-plugin": "0.4.3",
+        "postcss-loader": "3.0.0"
+      },
+      "dependencies": {
+        "css-loader": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-1.0.0.tgz",
+          "integrity": "sha512-tMXlTYf3mIMt3b0dDCOQFJiVvxbocJ5Ho577WiGPYPZcqVEO218L2iU22pDXzkTZCLDE+9AmGSUkWxeh/nZReA==",
+          "requires": {
+            "babel-code-frame": "^6.26.0",
+            "css-selector-tokenizer": "^0.7.0",
+            "icss-utils": "^2.1.0",
+            "loader-utils": "^1.0.2",
+            "lodash.camelcase": "^4.3.0",
+            "postcss": "^6.0.23",
+            "postcss-modules-extract-imports": "^1.2.0",
+            "postcss-modules-local-by-default": "^1.2.0",
+            "postcss-modules-scope": "^1.1.0",
+            "postcss-modules-values": "^1.3.0",
+            "postcss-value-parser": "^3.3.0",
+            "source-list-map": "^2.0.0"
+          }
+        },
+        "find-up": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
+          "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
+          "requires": {
+            "locate-path": "^2.0.0"
+          }
+        },
+        "icss-utils": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-2.1.0.tgz",
+          "integrity": "sha1-g/Cg7DeL8yRheLbCrZE28TWxyWI=",
+          "requires": {
+            "postcss": "^6.0.1"
+          }
+        },
+        "mini-css-extract-plugin": {
+          "version": "0.4.3",
+          "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.3.tgz",
+          "integrity": "sha512-Mxs0nxzF1kxPv4TRi2NimewgXlJqh0rGE30vviCU2WHrpbta6wklnUV9dr9FUtoAHmB3p3LeXEC+ZjgHvB0Dzg==",
+          "requires": {
+            "loader-utils": "^1.1.0",
+            "schema-utils": "^1.0.0",
+            "webpack-sources": "^1.1.0"
+          }
+        },
+        "postcss": {
+          "version": "6.0.23",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+          "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+          "requires": {
+            "chalk": "^2.4.1",
+            "source-map": "^0.6.1",
+            "supports-color": "^5.4.0"
+          }
+        },
+        "postcss-modules-extract-imports": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.1.tgz",
+          "integrity": "sha512-6jt9XZwUhwmRUhb/CkyJY020PYaPJsCyt3UjbaWo6XEbH/94Hmv6MP7fG2C5NDU/BcHzyGYxNtHvM+LTf9HrYw==",
+          "requires": {
+            "postcss": "^6.0.1"
+          }
+        },
+        "postcss-modules-local-by-default": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz",
+          "integrity": "sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk=",
+          "requires": {
+            "css-selector-tokenizer": "^0.7.0",
+            "postcss": "^6.0.1"
+          }
+        },
+        "postcss-modules-scope": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz",
+          "integrity": "sha1-1upkmUx5+XtipytCb75gVqGUu5A=",
+          "requires": {
+            "css-selector-tokenizer": "^0.7.0",
+            "postcss": "^6.0.1"
+          }
+        },
+        "postcss-modules-values": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz",
+          "integrity": "sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA=",
+          "requires": {
+            "icss-replace-symbols": "^1.1.0",
+            "postcss": "^6.0.1"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+        },
+        "schema-utils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
+          }
+        }
+      }
+    },
     "accepts": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
@@ -2332,6 +2452,51 @@
         "postcss": "^7.0.5"
       }
     },
+    "css-selector-tokenizer": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.1.tgz",
+      "integrity": "sha512-xYL0AMZJ4gFzJQsHUKa5jiWWi2vH77WVNg7JYRyewwj6oPh4yb/y6Y9ZCw9dsj/9UauMhtuxR+ogQd//EdEVNA==",
+      "requires": {
+        "cssesc": "^0.1.0",
+        "fastparse": "^1.1.1",
+        "regexpu-core": "^1.0.0"
+      },
+      "dependencies": {
+        "cssesc": {
+          "version": "0.1.0",
+          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz",
+          "integrity": "sha1-yBSQPkViM3GgR3tAEJqq++6t27Q="
+        },
+        "jsesc": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+          "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0="
+        },
+        "regexpu-core": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-1.0.0.tgz",
+          "integrity": "sha1-hqdj9Y7k18L2sQLkdkBQ3n7ZDGs=",
+          "requires": {
+            "regenerate": "^1.2.1",
+            "regjsgen": "^0.2.0",
+            "regjsparser": "^0.1.4"
+          }
+        },
+        "regjsgen": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz",
+          "integrity": "sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc="
+        },
+        "regjsparser": {
+          "version": "0.1.5",
+          "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.1.5.tgz",
+          "integrity": "sha1-fuj4Tcb6eS0/0K4ijSS9lJ6tIFw=",
+          "requires": {
+            "jsesc": "~0.5.0"
+          }
+        }
+      }
+    },
     "cssdb": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-4.4.0.tgz",
@@ -2774,6 +2939,11 @@
         }
       }
     },
+    "extracted-loader": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/extracted-loader/-/extracted-loader-1.0.4.tgz",
+      "integrity": "sha512-G8A0hT/WCWIjesZm7BwbWdST5dQ08GNnCpTrJT/k/FYzuiJwlV1gyWjnuoizOzAR4jpEYXG2J++JyEKN/EB26Q=="
+    },
     "fast-deep-equal": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
@@ -2784,6 +2954,11 @@
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
     },
+    "fastparse": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
+      "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ=="
+    },
     "figgy-pudding": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz",
@@ -3168,6 +3343,11 @@
         "safer-buffer": ">= 2.1.2 < 3"
       }
     },
+    "icss-replace-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz",
+      "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0="
+    },
     "icss-utils": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-4.1.1.tgz",
@@ -3563,6 +3743,11 @@
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
       "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
     },
+    "lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY="
+    },
     "lodash.curry": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.curry/-/lodash.curry-4.1.1.tgz",

package.json

@@ -15,6 +15,7 @@
   "author": "",
   "license": "GPL-3.0-or-later",
   "dependencies": {
+    "@zeit/next-css": "^1.0.1",
     "next": "^9.1.7",
     "react": "^16.12.0",
     "react-dom": "^16.12.0"

pages/index.js

@@ -0,0 +1,11 @@
+import "../style.css"
+import Link from 'next/link';
+
+
+const Index = () => (
+    <div>
+      <p>Hello Next.js</p>
+    </div>
+  );
+  
+  export default Index;

style.css

@@ -0,0 +1,3 @@
+* {
+    color: red
+}