update to next 10

Author: joelhooks

next.config.js

@@ -1,44 +1,24 @@
 const withPlugins = require('next-compose-plugins')
-const withMdxEnhanced = require('next-mdx-enhanced')
-const checkEnv = require('@47ng/check-env').default
-const nodePath = require('path')
-const readingTime = require('reading-time')
+const withMDX = require('@next/mdx')()
 
-checkEnv({
-  required: ['NEXT_PUBLIC_DEPLOYMENT_URL'],
-})
+const nextConfig = {
+  reactStrictMode: true,
+  async redirects() {
+    return []
+  },
+}
 
-const useURL = (path) =>
-  `${process.env.NEXT_PUBLIC_DEPLOYMENT_URL}${path || ''}`
-
-module.exports = withPlugins([
-  withMdxEnhanced({
-    layoutPath: 'src/layouts',
-    defaultLayout: true,
-    fileExtensions: ['mdx'],
-    remarkPlugins: [
-      require('remark-slug'),
-      require('remark-footnotes'),
-      require('remark-code-titles'),
-      //require('@fec/remark-a11y-emoji')
-    ],
-    rehypePlugins: [require('mdx-prism')],
-    extendFrontMatter: {
-      process: (mdxContent, frontMatter) => {
-        const pagesDir = nodePath.resolve(__dirname, 'src/pages')
-        // Somehow the __resourcePath does not start with a /:
-        const path = ('/' + frontMatter.__resourcePath)
-          .replace(pagesDir, '')
-          .replace('.mdx', '')
-          .replace('.tsx', '')
-          .replace(/^\/index$/, '/')
-          .replace(/\/index$/, '')
-        return {
-          path,
-          url: useURL(path),
-          readingTime: readingTime(mdxContent),
-        }
-      },
-    },
-  }),
-])
+module.exports = withPlugins(
+  [
+    withMDX({
+      pageExtensions: ['ts', 'tsx', 'mdx'],
+      remarkPlugins: [
+        require('remark-slug'),
+        require('remark-footnotes'),
+        require('remark-code-titles'),
+      ],
+      rehypePlugins: [require('mdx-prism')],
+    }),
+  ],
+  nextConfig,
+)

package.json

@@ -10,39 +10,38 @@
     "test": "jest --watch"
   },
   "dependencies": {
-    "@47ng/check-env": "^2.0.1",
+    "@next/mdx": "^10.0.1",
     "dotenv-flow": "^3.2.0",
     "husky": "^4.3.0",
-    "lint-staged": "^10.4.0",
+    "lint-staged": "^10.5.1",
     "mdx-prism": "^0.3.1",
-    "next": "9.5.3",
+    "next": "10.0.1",
     "next-mdx-enhanced": "^4.0.0",
-    "next-seo": "^4.11.0",
-    "next-sitemap": "^1.2.4",
+    "next-seo": "^4.15.1",
+    "next-sitemap": "^1.2.26",
     "prettier": "^2.1.2",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "reading-time": "^1.2.0",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
     "rehype": "^11.0.0",
     "remark-code-titles": "^0.1.1",
     "remark-footnotes": "^3.0.0",
     "remark-slug": "^6.0.0"
   },
   "devDependencies": {
-    "@babel/plugin-transform-react-jsx": "^7.10.4",
+    "@babel/plugin-transform-react-jsx": "^7.12.5",
     "@tailwindcss/typography": "^0.2.0",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.0.4",
-    "@types/node": "^14.11.5",
-    "@types/react": "^16.9.51",
-    "babel-jest": "^26.5.2",
-    "jest": "^26.5.2",
-    "next-compose-plugins": "^2.2.0",
+    "@testing-library/jest-dom": "^5.11.5",
+    "@testing-library/react": "^11.11.1",
+    "@types/node": "^14.14.7",
+    "@types/react": "^16.9.56",
+    "babel-jest": "^26.6.3",
+    "jest": "^26.6.3",
+    "next-compose-plugins": "^2.2.1",
     "postcss-nested": "^5.0.1",
     "postcss-preset-env": "^6.7.0",
-    "react-test-renderer": "^16.13.1",
-    "tailwindcss": "^1.8.11",
-    "typescript": "^4.0.3"
+    "react-test-renderer": "^17.0.1",
+    "tailwindcss": "^1.9.6",
+    "typescript": "^4.0.5"
   },
   "husky": {
     "hooks": {

public/robots.txt

@@ -1,4 +1,4 @@
 User-agent: *
 Allow: /
-Host: https://example.com
-Sitemap: https://example.com/sitemap.xml
+Host: undefined
+Sitemap: undefined/sitemap.xml

public/sitemap.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>https://example.com/</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-10-06T21:50:24.593Z</lastmod></url>
-<url><loc>https://example.com/hi</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-10-06T21:50:24.593Z</lastmod></url>
+<url><loc>undefined/</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-11-10T19:00:12.092Z</lastmod></url>
+<url><loc>undefined/hi</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-11-10T19:00:12.092Z</lastmod></url>
 </urlset>

src/layouts/index.tsx

@@ -9,13 +9,8 @@ const DefaultLayout: FunctionComponent<LayoutProps> = ({
   children,
   frontMatter,
 }) => {
-  const {
-    title,
-    description,
-    titleAppendSiteName = false,
-    url,
-    ogImage,
-  } = frontMatter
+  const {title, description, titleAppendSiteName = false, url, ogImage} =
+    frontMatter || {}
   return (
     <>
       <NextSeo
@@ -30,8 +25,8 @@ const DefaultLayout: FunctionComponent<LayoutProps> = ({
         }}
         canonical={url}
       />
-      <div className="prose max-w-none">
-        <h1>{title}</h1>
+      <div className="prose md:prose-xl max-w-screen-md mt-0 mx-auto leading-6">
+        {title && <h1 className="text-xl leading-tight">{title}</h1>}
         {children}
       </div>
     </>

src/pages/hi.mdx

@@ -1,3 +1,13 @@
+export const meta = {
+  title: 'this is the page title!',
+}
+
 # Hi There
 
-THis is some MDX!
+This is some MDX!
+
+import DefaultLayout from '../layouts/index'
+
+export default DefaultLayou
+
+t