Next.js migration

.gitignore

@@ -7,6 +7,7 @@ logs
 
 # Builds
 public
+.next
 
 # Dependency directory
 # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
@@ -31,4 +32,5 @@ esdata
 
 .env
 
-config/sitemap.yml
+config/sitemap.yml
+.now

markdown-loader.js

@@ -0,0 +1,7 @@
+const marked = require('marked')
+const matter = require('gray-matter')
+
+module.exports = markdown => {
+    const { content } = matter(markdown)
+    return marked(content)
+}

next.config.js

@@ -0,0 +1,42 @@
+const path = require('path')
+
+module.exports = {
+    env: {
+        API_URL: 'https://api.stateofjs.com'
+    },
+    experimental: {
+        rewrites() {
+            return [
+                // {
+                //     source: '/:path',
+                //     destination: '/en/:path'
+                // }
+                // {
+                //     source: '/',
+                //     destination: '/[lang]?lang=en'
+                // },
+                // {
+                //     source: '/tshirt',
+                //     destination: '/en/tshirt?lang=en'
+                // }
+                // {
+                //     source: '/:path*',
+                //     destination: '/en/:path'
+                // }
+            ]
+        }
+    },
+    webpack(cfg) {
+        cfg.module.rules.push({
+            test: /\.ya?ml$/,
+            use: 'js-yaml-loader'
+        })
+
+        cfg.module.rules.push({
+            test: /.md$/,
+            use: ['html-loader', path.resolve('./markdown-loader')]
+        })
+
+        return cfg
+    }
+}

package.json

@@ -1,89 +1,117 @@
 {
-  "name": "state-of-js-2019",
-  "description": "State of JS 2019 survey report",
-  "version": "0.1.0",
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/StateOfJS/state-of-js-2019"
-  },
-  "contributors": [
-    {
-      "name": "Sacha Greif"
+    "name": "state-of-js-2019",
+    "description": "State of JS 2019 survey report",
+    "version": "0.1.0",
+    "repository": {
+        "type": "git",
+        "url": "git://github.com/StateOfJS/state-of-js-2019"
     },
-    {
-      "name": "Raphaël Benitte"
+    "contributors": [
+        {
+            "name": "Sacha Greif"
+        },
+        {
+            "name": "Raphaël Benitte"
+        }
+    ],
+    "engineStrict": true,
+    "engines": {
+        "node": ">=10.0.0"
+    },
+    "babel": {
+        "presets": [
+            "next/babel"
+        ],
+        "plugins": [
+            [
+                "module-resolver",
+                {
+                    "alias": {
+                        "core": "./src/core",
+                        "data": "./src/data",
+                        "lib": "./src/lib"
+                    }
+                }
+            ],
+            [
+                "styled-components",
+                {
+                    "ssr": true
+                }
+            ]
+        ]
+    },
+    "dependencies": {
+        "@nivo/bar": "0.61.1",
+        "@nivo/bump": "0.61.1",
+        "@nivo/circle-packing": "0.61.0",
+        "@nivo/core": "0.61.0",
+        "@nivo/geo": "0.61.1",
+        "@nivo/line": "0.61.1",
+        "@nivo/pie": "0.61.1",
+        "@nivo/sankey": "0.61.2",
+        "@nivo/scatterplot": "0.61.1",
+        "@nivo/stream": "0.61.1",
+        "@nivo/sunburst": "0.61.0",
+        "@nivo/treemap": "0.61.0",
+        "@nivo/waffle": "0.61.1",
+        "babel-plugin-styled-components": "^1.10.7",
+        "bowser": "2.1.0",
+        "classnames": "^2.2.6",
+        "d3-array": "^2.4.0",
+        "d3-format": "^1.3.2",
+        "d3-scale": "^2.2.2",
+        "dotenv": "^8.2.0",
+        "gatsby": "^2.18.13",
+        "gatsby-cli": "^2.8.19",
+        "gatsby-plugin-google-analytics": "^2.1.26",
+        "gatsby-plugin-netlify": "^2.1.24",
+        "gatsby-plugin-react-helmet": "^3.1.14",
+        "gatsby-plugin-sass": "^2.1.26",
+        "gatsby-plugin-styled-components": "^3.1.16",
+        "gatsby-plugin-webpack-bundle-analyzer": "^1.0.5",
+        "gatsby-source-filesystem": "^2.1.36",
+        "gatsby-source-graphql": "^2.1.25",
+        "gatsby-transformer-remark": "^2.6.34",
+        "gatsby-transformer-yaml": "^2.2.16",
+        "html-loader": "^0.5.5",
+        "json2csv": "^4.5.4",
+        "lodash": "^4.17.11",
+        "markdown-it": "^8.4.2",
+        "markdown-loader": "^4.0.0",
+        "next": "^9.2.3-canary.22",
+        "node-fetch": "^2.6.0",
+        "node-sass": "^4.12.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react": "16.8.6",
+        "react-confetti": "^3.1.0",
+        "react-dom": "npm:@hot-loader/react-dom",
+        "react-ga": "^2.5.7",
+        "react-helmet": "^5.2.0",
+        "react-markdown": "^4.0.8",
+        "react-modal": "^3.11.1",
+        "react-tabs": "^3.0.0",
+        "remove-markdown": "^0.3.0",
+        "styled-components": "^4.4.1",
+        "tinycolor2": "^1.4.1",
+        "topojson-client": "^3.0.0"
+    },
+    "devDependencies": {
+        "babel-plugin-module-resolver": "^4.0.0",
+        "eslint-config-prettier": "^4.1.0",
+        "gray-matter": "^4.0.2",
+        "js-yaml-loader": "^1.2.2",
+        "marked": "^0.8.0",
+        "prettier": "^1.17.0"
+    },
+    "private": true,
+    "scripts": {
+        "dev": "next",
+        "build": "next build",
+        "start": "next start",
+        "deploy": "gatsby build && gh-pages -d public",
+        "dev:clean": "rm -rf .cache && yarn run dev",
+        "fmt": "prettier --write \"src/**/*.{js,jsx}\" \"node_src/**/*.{js}\" \"config/**/*.{yaml,yml}\""
     }
-  ],
-  "engineStrict": true,
-  "engines": {
-    "node": ">=10.0.0"
-  },
-  "dependencies": {
-    "@nivo/bar": "0.61.1",
-    "@nivo/bump": "0.61.1",
-    "@nivo/circle-packing": "0.61.0",
-    "@nivo/core": "0.61.0",
-    "@nivo/geo": "0.61.1",
-    "@nivo/line": "0.61.1",
-    "@nivo/pie": "0.61.1",
-    "@nivo/sankey": "0.61.2",
-    "@nivo/scatterplot": "0.61.1",
-    "@nivo/stream": "0.61.1",
-    "@nivo/sunburst": "0.61.0",
-    "@nivo/treemap": "0.61.0",
-    "@nivo/waffle": "0.61.1",
-    "babel-plugin-styled-components": "^1.10.6",
-    "bowser": "2.1.0",
-    "classnames": "^2.2.6",
-    "d3-array": "^2.4.0",
-    "d3-format": "^1.3.2",
-    "d3-scale": "^2.2.2",
-    "dotenv": "^8.2.0",
-    "gatsby": "^2.18.13",
-    "gatsby-cli": "^2.8.19",
-    "gatsby-plugin-google-analytics": "^2.1.26",
-    "gatsby-plugin-netlify": "^2.1.24",
-    "gatsby-plugin-react-helmet": "^3.1.14",
-    "gatsby-plugin-sass": "^2.1.26",
-    "gatsby-plugin-styled-components": "^3.1.16",
-    "gatsby-plugin-webpack-bundle-analyzer": "^1.0.5",
-    "gatsby-source-filesystem": "^2.1.36",
-    "gatsby-source-graphql": "^2.1.25",
-    "gatsby-transformer-remark": "^2.6.34",
-    "gatsby-transformer-yaml": "^2.2.16",
-    "html-loader": "^0.5.5",
-    "js-yaml": "^3.12.1",
-    "json2csv": "^4.5.4",
-    "lodash": "^4.17.11",
-    "markdown-it": "^8.4.2",
-    "markdown-loader": "^4.0.0",
-    "node-fetch": "^2.5.0",
-    "node-sass": "^4.12.0",
-    "object-assign": "^4.1.1",
-    "prop-types": "^15.7.2",
-    "react": "16.8.6",
-    "react-confetti": "^3.1.0",
-    "react-dom": "npm:@hot-loader/react-dom",
-    "react-ga": "^2.5.7",
-    "react-helmet": "^5.2.0",
-    "react-markdown": "^4.0.8",
-    "react-modal": "^3.11.1",
-    "react-tabs": "^3.0.0",
-    "remove-markdown": "^0.3.0",
-    "styled-components": "^4.4.1",
-    "tinycolor2": "^1.4.1",
-    "topojson-client": "^3.0.0"
-  },
-  "devDependencies": {
-    "eslint-config-prettier": "^4.1.0",
-    "prettier": "^1.17.0"
-  },
-  "private": true,
-  "scripts": {
-    "build": "gatsby build",
-    "deploy": "gatsby build && gh-pages -d public",
-    "dev": "gatsby develop",
-    "dev:clean": "rm -rf .cache && yarn run dev",
-    "fmt": "prettier --write \"src/**/*.{js,jsx}\" \"node_src/**/*.{js}\" \"config/**/*.{yaml,yml}\""
-  }
 }

src/core/Layout.js

@@ -1,8 +1,8 @@
-import React, { PureComponent, useCallback, useEffect, useState } from 'react'
+import { PureComponent, useCallback, useEffect, useState } from 'react'
 import propTypes from 'prop-types'
+import { withRouter } from 'next/router'
 import classNames from 'classnames'
 import { ThemeProvider, createGlobalStyle } from 'styled-components'
-import '../stylesheets/screen.scss'
 import Pagination from './pages/Pagination'
 import Sidebar from './components/Sidebar'
 import Head from './components/Head'
@@ -54,8 +54,8 @@ const ThemedLayout = ({
 
     return (
         <ThemeProvider theme={themes[themeId]}>
-            <ToolsContextProvider>
-                <EntitiesContextProvider>
+            <ToolsContextProvider survey={props.pageContext.survey}>
+                <EntitiesContextProvider entities={props.pageContext.entities}>
                     <GlobalStyle />
                     <div
                         className={classNames('pageLayout', `PageLayout--${context.id}`, {
@@ -90,7 +90,7 @@ const ThemedLayout = ({
     )
 }
 
-export default class Layout extends PureComponent {
+class Layout extends PureComponent {
     static propTypes = {
         showPagination: propTypes.bool.isRequired
     }
@@ -132,13 +132,15 @@ export default class Layout extends PureComponent {
     }
 
     render() {
-        const { showPagination, location, pageContext } = this.props
+        const { showPagination, location, pageContext, router } = this.props
         const { showSidebar } = this.state
-        const context = mergePageContext(pageContext, location, this.state)
+        const { asPath, query } = router
+        const basePath = asPath.replace(new RegExp(`^/${query.lang}`), '') || '/'
+        const context = mergePageContext({ ...pageContext, ...this.state, basePath }, location)
 
         return (
             <PageContextProvider value={context}>
-                <I18nContextProvider>
+                <I18nContextProvider translations={pageContext.translations}>
                     <ThemedLayout
                         context={context}
                         showPagination={showPagination}
@@ -153,6 +155,8 @@ export default class Layout extends PureComponent {
     }
 }
 
+export default withRouter(Layout)
+
 const GlobalStyle = createGlobalStyle`
     body {
         background: ${props => props.theme.colors.background};
@@ -161,45 +165,45 @@ const GlobalStyle = createGlobalStyle`
         font-feature-settings: 'liga' 0;
         line-height: 1.7;
     }
-    
+
     html {
     box-sizing: border-box;
     }
-    
+
     *,
     *:before,
     *:after {
         box-sizing: inherit;
     }
-    
+
     a {
         text-decoration: none;
-        
+
         &,
         &:link,
         &:visited,
         &:active,
         &:focus {
             color: ${props => props.theme.colors.link};
         }
-        
+
         &:hover {
             text-decoration: underline;
             color: ${props => props.theme.colors.linkHover};
         }
     }
-    
+
     .ReactModal__Overlay {
         z-index: 1000;
     }
-    
+
     .Page__Contents--awards {
         @media ${mq.mediumLarge} {
             display: grid;
             grid-template-columns: 1fr 1fr;
             column-gap: ${props => props.theme.spacing * 4}px;
             row-gap: ${props => props.theme.spacing * 4}px;
-            
+
             .Page__Introduction {
                 grid-column: 1 / 3;
             }