Testing next

.eslintrc.js

@@ -7,9 +7,8 @@ module.exports = {
   },
   extends: [
     "eslint:recommended",
-    "plugin:react/recommended",
+    "next/core-web-vitals",
     "plugin:@typescript-eslint/recommended",
-    "prettier",
   ],
   parser: "@typescript-eslint/parser",
   parserOptions: {
@@ -19,9 +18,6 @@ module.exports = {
     ecmaVersion: 12,
     sourceType: "module",
   },
-  plugins: ["react", "@typescript-eslint", "jest"],
-  rules: {
-    "react/prop-types": 0,
-    "react/jsx-one-expression-per-line": "off",
-  },
+  plugins: ["react", "@typescript-eslint", "jest", "prettier"],
+  rules: {},
 };

.gitignore

@@ -4,6 +4,7 @@
 
 # storybook
 build-storybook.log
+storybook-static
 
 # dependencies
 /node_modules
@@ -13,6 +14,10 @@ build-storybook.log
 # testing
 /coverage
 
+# next.js
+/.next/
+/out/
+
 # production
 /build
 
@@ -21,6 +26,14 @@ build-storybook.log
 
 # misc
 .DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
 .env.local
 .env.development.local
 .env.test.local
@@ -29,3 +42,9 @@ build-storybook.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

.storybook/main.js

@@ -1,9 +1,43 @@
+const path = require("path");
+
 module.exports = {
   stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  staticDirs: ["../public"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "@storybook/preset-create-react-app",
+    {
+      /**
+       * Fix Storybook issue with PostCSS@8
+       * @see https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085
+       */
+      name: "@storybook/addon-postcss",
+      options: {
+        postcssLoaderOptions: {
+          implementation: require("postcss"),
+        },
+      },
+    },
   ],
+  core: {
+    builder: "webpack5",
+  },
+  webpackFinal: (config) => {
+    config.resolve.modules = [
+      ...(config.resolve.modules || []),
+      path.resolve(__dirname, "../src"),
+    ];
+
+    /**
+     * Fixes font import with /
+     * @see https://github.com/storybookjs/storybook/issues/12844#issuecomment-867544160
+     */
+    config.resolve.roots = [
+      path.resolve(__dirname, "../public"),
+      "node_modules",
+    ];
+
+    return config;
+  },
   typescript: { reactDocgen: "react-docgen" },
 };

.storybook/preview.js

@@ -1,6 +1,9 @@
+import "bootstrap/dist/css/bootstrap.min.css";
+
 import CustomThemeProvider from "./../src/components/CustomThemeProvider";
 import { I18nextProvider } from "react-i18next";
 import i18n from "../src/i18n";
+import "../src/styles/globals.css";
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },

.vscode/settings.json

@@ -1,6 +1,7 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
+    "source.fixAll.eslint": true
   },
-  "typescript.tsdk": "node_modules/typescript/lib"
-}
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}

netlify.toml

@@ -1,3 +1,6 @@
+[[plugins]]
+  package = "@netlify/plugin-nextjs"
+
 [context.production.environment]
   REACT_APP_API_URL = "https://api.infrarays.digitalungdom.se"
 
@@ -10,7 +13,8 @@
 [context.dev.environment]
   REACT_APP_API_URL = "https://devapi.infrarays.digitalungdom.se"
 
-[[redirects]]
-  from = "/*"
-  to = "/index.html"
-  status = 200
+[build]
+  NETLIFY_USE_YARN = "true"
+  environment = { YARN_VERSION = "1.22.17", NODE_VERSION = "16.13.1" }
+  command = "yarn next build"
+  publish = ".next"

next-env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="next" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+module.exports = {
+  reactStrictMode: true,
+  images: {
+    disableStaticImages: true,
+  },
+};