update to next v11

Author: RenaudRohlinger

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": ["next", "plugin:tailwind/recommended"]
+}

.eslintrc.js

@@ -0,0 +1,20 @@
+Copyright (c) 2012-2021 Scott Chacon and others
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

LICENSE

@@ -5,6 +5,7 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 
 const withOffline = require('next-offline')
 
+// esbuild to speed up dev
 function esbuildLoader(config, options) {
   const jsLoader = config.module.rules.find(
     (rule) => rule.test && rule.test.test('.js')
@@ -22,55 +23,49 @@ function esbuildLoader(config, options) {
   }
 }
 
-// the config break if we use next export
-const nextConfig =
-  process.env.EXPORT !== 'true'
-    ? {
-        webpack5: true,
-        webpack(config, { webpack, dev, isServer }) {
-          config.plugins.push(
-            new webpack.ProvidePlugin({
-              React: 'react',
-            })
-          )
-          // use esbuild in dev for faster HMR
-          if (dev) {
-            esbuildLoader(config, {
-              loader: 'jsx',
-              target: 'es2017',
-            })
-            // config.optimization.minimizer.shift()
-          }
+const nextConfig = {
+  webpack(config, { webpack, dev, isServer }) {
+    config.plugins.push(
+      new webpack.ProvidePlugin({
+        React: 'react',
+      })
+    )
+    // use esbuild in dev for faster HMR
+    if (dev) {
+      esbuildLoader(config, {
+        loader: 'jsx',
+        target: 'es2017',
+      })
+    }
 
-          // audio support
-          config.module.rules.push({
-            test: /\.(ogg|mp3|wav|mpe?g)$/i,
-            exclude: config.exclude,
-            use: [
-              {
-                loader: require.resolve('url-loader'),
-                options: {
-                  limit: config.inlineImageLimit,
-                  fallback: require.resolve('file-loader'),
-                  publicPath: `${config.assetPrefix}/_next/static/images/`,
-                  outputPath: `${isServer ? '../' : ''}static/images/`,
-                  name: '[name]-[hash].[ext]',
-                  esModule: config.esModule || false,
-                },
-              },
-            ],
-          })
+    // audio support
+    config.module.rules.push({
+      test: /\.(ogg|mp3|wav|mpe?g)$/i,
+      exclude: config.exclude,
+      use: [
+        {
+          loader: require.resolve('url-loader'),
+          options: {
+            limit: config.inlineImageLimit,
+            fallback: require.resolve('file-loader'),
+            publicPath: `${config.assetPrefix}/_next/static/images/`,
+            outputPath: `${isServer ? '../' : ''}static/images/`,
+            name: '[name]-[hash].[ext]',
+            esModule: config.esModule || false,
+          },
+        },
+      ],
+    })
 
-          config.module.rules.push({
-            test: /\.(glsl|vs|fs|vert|frag)$/,
-            exclude: /node_modules/,
-            use: ['raw-loader', 'glslify-loader'],
-          })
+    config.module.rules.push({
+      test: /\.(glsl|vs|fs|vert|frag)$/,
+      exclude: /node_modules/,
+      use: ['raw-loader', 'glslify-loader'],
+    })
 
-          return config
-        },
-      }
-    : {}
+    return config
+  },
+}
 
 // manage i18n
 if (process.env.EXPORT !== 'true') {

next.config.js

@@ -4,64 +4,47 @@
   "authors": [
     "Renaud ROHLINGER <https://twitter.com/onirenaud>"
   ],
-  "private": false,
+  "license": "MIT",
+  "private": true,
   "scripts": {
     "lint": "yarn prettier && yarn eslint",
-    "eslint": "eslint --fix \"src/**/*.{js,jsx}\" --ext jsconfig.json",
-    "prettier": "prettier --list-different '**/*.{js,jsx,md}'",
+    "eslint": "eslint --fix \"./src/**/*.{js,jsx}\" --ext jsconfig.json",
+    "prettier": "prettier --list-different \"./src/**/*.{js,jsx,md}\"",
     "dev": "next dev",
     "build": "next build",
     "export": "EXPORT=true next build && EXPORT=true next export",
     "analyze": "ANALYZE=true next build",
     "start": "next start"
   },
-  "lint-staged": {
-    "*.{js,jsx,json,md}": [
-      "prettier --write"
-    ],
-    "*.{js,jsx}": [
-      "eslint --fix"
-    ]
-  },
   "dependencies": {
     "@react-three/a11y": "^2.0.2",
     "@react-three/drei": "^6.1.2",
     "@react-three/fiber": "^7.0.1",
-    "esbuild-loader": "^2.13.1",
     "next": "^11.0.0",
-    "react": "^0.0.0-experimental-dbe3363cc",
+    "react": "^18.0.0-alpha-dbe3363cc",
     "react-dom": "^17.0.2",
     "three": "^0.129.0",
     "three-stdlib": "^2.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.17",
-    "@next/bundle-analyzer": "^10.0.7",
+    "@next/bundle-analyzer": "^11.0.0",
     "autoprefixer": "^10.2.6",
-    "babel-eslint": "^10.1.0",
     "babel-plugin-glsl": "^1.0.0",
-    "eslint": "^7.27.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-config-react-app": "^6.0.0",
-    "eslint-plugin-flowtype": "^5.2.2",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.23.2",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "esbuild-loader": "^2.13.1",
+    "eslint": "^7.28.0",
+    "eslint-config-next": "^11.0.0",
     "eslint-plugin-tailwind": "^0.2.1",
     "file-loader": "^6.2.0",
     "glslify": "^7.1.1",
     "glslify-loader": "^2.0.0",
-    "lint-staged": "^10.5.4",
     "next-compose-plugins": "^2.2.1",
     "next-offline": "^5.0.5",
     "postcss": "^8.3.0",
     "prettier": "^2.3.0",
     "raw-loader": "^4.0.2",
     "tailwindcss": "^2.1.2",
     "url-loader": "^4.1.1",
-    "webpack": "^5.38.1"
-  },
-  "license": "MIT"
+    "webpack": "^5.39.0"
+  }
 }

package.json

@@ -1,4 +1,8 @@
-// custom pages/404.js !! Do not remove please or it will break build
+// custom pages/404.jsx !! Do not remove please or it will break build
 export default function Error() {
-  return <h1>404 - Page Not Found</h1>
+  return (
+    <>
+      <h1>404 - Something went wrong</h1>
+    </>
+  )
 }

public/robots.txt

@@ -1,4 +1,8 @@
 // custom pages/500.js !! Do not remove please or it will break build
 export default function Error() {
-  return <h1>500 - Something went wrong</h1>
+  return (
+    <>
+      <h1>500 - Something went wrong</h1>
+    </>
+  )
 }

src/components/layout/_canvas.jsx src/components/layout/canvas.jsx

@@ -1,19 +1,19 @@
 import { useRouter } from 'next/router'
 import useStore from '@/helpers/store'
-import { useEffect, Children } from 'react'
+import { useEffect, Children, Component } from 'react'
 import Header from '../config'
 import dynamic from 'next/dynamic'
-import Dom from '@/components/layout/_dom'
+import Dom from '@/components/layout/dom'
 
 import '@/styles/index.css'
 
 let LCanvas = null
 if (process.env.NODE_ENV === 'production') {
-  LCanvas = dynamic(() => import('@/components/layout/_canvas'), {
+  LCanvas = dynamic(() => import('@/components/layout/canvas'), {
     ssr: false,
   })
 } else {
-  LCanvas = require('@/components/layout/_canvas').default
+  LCanvas = require('@/components/layout/canvas').default
 }
 
 function Layout({ dom }) {
@@ -24,20 +24,25 @@ const ForwardPropsToR3fComponent = ({ comp, pageProps }) => {
   let r3fArr = []
   let compArr = []
 
-  Children.forEach(comp(pageProps).props.children, (child) => {
-    if (child?.props && child.props.r3f) {
-      r3fArr.push(child)
-    } else {
-      compArr.push(child)
-    }
-  })
-
-  return (
-    <>
-      {compArr && <Layout dom={compArr} />}
-      {r3fArr && <LCanvas>{r3fArr}</LCanvas>}
-    </>
-  )
+  try {
+    Children.forEach(comp(pageProps).props.children, (child) => {
+      if (child?.props && child.props.r3f) {
+        r3fArr.push(child)
+      } else {
+        compArr.push(child)
+      }
+    })
+
+    return (
+      <>
+        {compArr && <Layout dom={compArr} />}
+        {r3fArr && <LCanvas>{r3fArr}</LCanvas>}
+      </>
+    )
+  } catch (error) {
+    // fallback security for SSG
+    return <comp {...pageProps} />
+  }
 }
 
 function App({ Component, pageProps = {} }) {