Update Next.js to 9.4.4

.env

@@ -1,4 +1,6 @@
 
+# TODO: use Next's new env logic
+
 # We must also define these variables in other places:
 # * Add build time and runtime environment variable values to the
 #   ZEIT dashboard. As of 4/14/2020, this is is a beta feature:
@@ -30,7 +32,7 @@ FEATURE_FLAG_MOCK_ACHIEVEMENTS=true
 FIREBASE_AUTH_DOMAIN=dev-tab-for-a-cause.firebaseapp.com
 FIREBASE_CLIENT_EMAIL=next-js-firebase-admin-sdk@dev-tab-for-a-cause.iam.gserviceaccount.com
 FIREBASE_DATABASE_URL=https://dev-tab-for-a-cause.firebaseio.com
-FIREBASE_PRIVATE_KEY=some-key-here # secret
+# FIREBASE_PRIVATE_KEY=some-key-here # secret
 FIREBASE_PROJECT_ID=dev-tab-for-a-cause
 FIREBASE_PUBLIC_API_KEY=AIzaSyDrGghKLnfOwwaSnPM0unRDXz_4YdorKU4
 
@@ -54,7 +56,10 @@ SESSION_COOKIE_SECURE_SAME_SITE_NONE=false
 # SESSION_SECRET_CURRENT=some-secret
 # SESSION_SECRET_PREVIOUS=a-previous-secret
 
-# @area/workaround/next-js-base-path
-URLS_BASE_PATH=""
-URLS_USE_TRAILING_SLASH=false
-URLS_API_BASE_PATH=""
+# Note that the base path is also hardcoded in vercel.json and
+# next.config.js.
+URLS_BASE_PATH=/newtab
+URLS_USE_TRAILING_SLASH=true
+# To allow calls to this API from the legacy app
+URLS_API_BASE_PATH=/v4
+

.gitignore

@@ -37,3 +37,5 @@ sessions
 # https://github.com/whitecolor/yalc#keep-it-out-of-git
 .yalc
 yalc.lock
+
+.vercel

next.config.js

@@ -10,6 +10,8 @@ const withSourceMaps = require('@zeit/next-source-maps')({
   devtool: 'hidden-source-map'
 })
 
+const basePath = process.env.URLS_BASE_PATH
+
 // Use the SentryWebpack plugin to upload the source maps during build.
 const SentryWebpackPlugin = require('@sentry/webpack-plugin')
 
@@ -24,7 +26,46 @@ if (process.env.USE_LOCAL_ENV_FILE === 'true') {
 }
 
 const nextConfig = {
+  // For routing, we need:
+  // * the app to live on the /newtab base path.
+  // * to enforce a trailing slash on pages. This ensures a functional
+  //   service worker and matches the URL in the Tab browser extension.
+  // * the /v4 path to rewrite to the /newtab path. This allows us to
+  //   access the API from a different base path, which is important
+  //   for routing through CloudFront with the legacy app.
+  // Next.js should soon have all the features we need for routing, but
+  // they're not yet stable. In v9.4.5-canary.41, setting trailingSlash
+  // to true in both Next.js and vercel.json apparently causes 404 errors.
+  // For now, we handle base path management here Next.js and enforce
+  // other route rewrites in vercel.json, stripping the trailing slash
+  // to route to Next.js.
+  experimental: {
+    // Should be stable in v9.4.5.
+    basePath: basePath,
+  },
   exportTrailingSlash: true,
+
+  // We set the trailing slash preference in vercel.json.
+  // The trailing slash option is stable in v9.4.5-canary.41:
+  // https://github.com/vercel/next.js/releases/tag/v9.4.5-canary.41
+  // trailingSlash: true,
+
+  // Redirects should be available in v9.4.5.
+  // async redirects() {
+  //   return [
+  //     // Redirect from the index page to the base path index.
+  //     // This is for convenience in local development and when
+  //     // viewing preview deployments. It shouldn't need to be used
+  //     // in production.
+  //     (basePath && {
+  //       source: `/`,
+  //       destination: `${basePath}/`,
+  //       basePath: false,
+  //       permanent: false,
+  //     }),
+  //   ].filter(Boolean)
+  // },
+
   // Public, build-time env vars.
   // https://nextjs.org/docs#build-time-configuration
   env: {
@@ -41,7 +82,7 @@ const nextConfig = {
     SENTRY_DSN: process.env.SENTRY_DSN,
     SERVICE_WORKER_ENABLED: process.env.SERVICE_WORKER_ENABLED,
     URLS_API_BASE_PATH: process.env.URLS_API_BASE_PATH,
-    URLS_BASE_PATH: process.env.URLS_BASE_PATH, // @area/workaround/next-js-base-path
+    URLS_BASE_PATH: basePath,
     URLS_USE_TRAILING_SLASH: process.env.URLS_USE_TRAILING_SLASH,
   },
   webpack: (config, options) => {

package.json

@@ -3,7 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "USE_LOCAL_ENV_FILE=true NODE_ENV=development next dev",
+    "go": "USE_LOCAL_ENV_FILE=true NODE_ENV=development vercel dev",
+    "dev": "echo \"Use the 'yarn go' command to develop locally.\"",
     "build": "NODE_ENV=test yarn run test && NODE_ENV=production yarn run relay && next build",
     "start": "NODE_ENV=production next start",
     "test": "yarn run lint && yarn run relay && jest",
@@ -31,7 +32,7 @@
     "isomorphic-unfetch": "^3.0.0",
     "lodash": "^4.17.15",
     "moment": "^2.26.0",
-    "next": "^9.3.6",
+    "next": "^9.4.4",
     "next-images": "^1.4.0",
     "next-offline": "^5.0.2",
     "prop-types": "^15.7.2",
@@ -70,6 +71,7 @@
     "jest": "^26.0.1",
     "mockdate": "^2.0.5",
     "prettier": "^2.0.5",
-    "relay-compiler": "^9.1.0"
+    "relay-compiler": "^9.1.0",
+    "vercel": "^19.2.0"
   }
 }

src/components/Link.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
 import clsx from 'clsx'
 import NextJsLink from 'next/link'
 import { makeStyles } from '@material-ui/core/styles'
-import { withBasePath } from 'src/utils/urls'
 
 const useStyles = makeStyles(() => ({
   anchor: {
@@ -17,17 +16,8 @@ const Link = (props) => {
   const { children, className, to } = props
   const classes = useStyles()
 
-  // We're disabling prefetch because it's broken by using
-  // an app subpath: see now.json "rewrites" and comments in
-  // urls.js. We can reenable prefetching after Next.js supports
-  // a "basePath" option.
-  // https://github.com/zeit/next.js/issues/4998#issuecomment-464345554
-  // We set the "as" parameter to fix client-side routing. This is a
-  // workaround for the missing "basePath" functionality:
-  // https://github.com/zeit/next.js/issues/4998#issuecomment-520888814
-  // @area/workaround/next-js-base-path
   return (
-    <NextJsLink href={to} as={withBasePath(to)} prefetch={false}>
+    <NextJsLink href={to}>
       <a className={clsx(classes.anchor, className)}>{children}</a>
     </NextJsLink>
   )

src/components/Logo.js

@@ -7,6 +7,7 @@ import tabLogoDefault from 'src/assets/logos/logo.svg'
 import tabLogoWhite from 'src/assets/logos/logo-white.svg'
 import tabLogoGrey from 'src/assets/logos/logo-grey.svg'
 import tabLogoWithText from 'src/assets/logos/logo-with-text.svg'
+import { withBasePath } from 'src/utils/urls'
 
 const useStyles = makeStyles(() => ({
   logoDefaults: {
@@ -44,13 +45,15 @@ const Logo = (props) => {
       }
     }
   }
-  // The alt text flashes on Firefox
+  // The alt text flashes on Firefox.
+  // Note we need to manually add the basePath to assets:
+  // https://github.com/vercel/next.js/issues/4998#issuecomment-657233398
   return (
     // eslint-disable-next-line jsx-a11y/alt-text
     <img
       style={style}
       className={clsx(classes.logo, className)}
-      src={logo}
+      src={withBasePath(logo)}
       {...otherProps}
     />
   )

src/components/__tests__/Link.test.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
 import NextJsLink from 'next/link'
-import { withBasePath } from 'src/utils/urls'
 
 jest.mock('next/link', () => (props) => (
   <div data-test-id="mock-next-js-link">{props.children}</div>
@@ -14,10 +13,6 @@ const getMockProps = () => ({
   to: '/some/url',
 })
 
-beforeEach(() => {
-  withBasePath.mockImplementation((url) => `/my-fake-basepath${url}`)
-})
-
 describe('Link component', () => {
   it('renders without error', () => {
     const Link = require('src/components/Link').default
@@ -51,26 +46,6 @@ describe('Link component', () => {
     expect(wrapper.at(0).prop('href')).toEqual('/my/thing')
   })
 
-  it('sets Next.js Link "as" prop to use the basePath', () => {
-    const Link = require('src/components/Link').default
-    const mockProps = {
-      ...getMockProps(),
-      to: '/my/thing',
-    }
-    const wrapper = shallow(<Link {...mockProps} />)
-    expect(wrapper.at(0).prop('href')).toEqual('/my/thing')
-  })
-
-  it('disables prefetch for the Next.js Link due to our basePath workaround', () => {
-    const Link = require('src/components/Link').default
-    const mockProps = {
-      ...getMockProps(),
-      to: '/my/thing',
-    }
-    const wrapper = shallow(<Link {...mockProps} />)
-    expect(wrapper.at(0).prop('as')).toEqual('/my-fake-basepath/my/thing')
-  })
-
   it('assigns the className prop to the anchor', () => {
     const Link = require('src/components/Link').default
     const mockProps = {

src/components/__tests__/Logo.test.js

@@ -1,12 +1,19 @@
 import React from 'react'
 import { shallow } from 'enzyme'
+import { withBasePath } from 'src/utils/urls'
+
+jest.mock('src/utils/urls')
 
 const getMockProps = () => ({
   className: undefined,
   color: 'purple',
   includeText: false,
 })
 
+beforeAll(() => {
+  withBasePath.mockImplementation((val) => `/newtab/${val}`)
+})
+
 describe('Logo component', () => {
   it('renders without error', () => {
     const Logo = require('src/components/Logo').default
@@ -59,7 +66,7 @@ describe('Logo component', () => {
       includeText: false,
     }
     const wrapper = shallow(<Logo {...mockProps} />)
-    expect(wrapper.find('img').prop('src')).toEqual('logo.svg')
+    expect(wrapper.find('img').prop('src')).toEqual('/newtab/logo.svg')
   })
 
   it('uses the correct file for color=default', () => {
@@ -69,7 +76,7 @@ describe('Logo component', () => {
       color: 'default',
     }
     const wrapper = shallow(<Logo {...mockProps} />)
-    expect(wrapper.find('img').prop('src')).toEqual('logo.svg')
+    expect(wrapper.find('img').prop('src')).toEqual('/newtab/logo.svg')
   })
 
   it('uses the correct file for color=purple', () => {
@@ -79,7 +86,7 @@ describe('Logo component', () => {
       color: 'purple',
     }
     const wrapper = shallow(<Logo {...mockProps} />)
-    expect(wrapper.find('img').prop('src')).toEqual('logo.svg')
+    expect(wrapper.find('img').prop('src')).toEqual('/newtab/logo.svg')
   })
 
   it('uses the correct file for color=white', () => {
@@ -89,7 +96,7 @@ describe('Logo component', () => {
       color: 'white',
     }
     const wrapper = shallow(<Logo {...mockProps} />)
-    expect(wrapper.find('img').prop('src')).toEqual('logo-white.svg')
+    expect(wrapper.find('img').prop('src')).toEqual('/newtab/logo-white.svg')
   })
 
   it('uses the correct file for color=grey', () => {
@@ -99,7 +106,7 @@ describe('Logo component', () => {
       color: 'grey',
     }
     const wrapper = shallow(<Logo {...mockProps} />)
-    expect(wrapper.find('img').prop('src')).toEqual('logo-grey.svg')
+    expect(wrapper.find('img').prop('src')).toEqual('/newtab/logo-grey.svg')
   })
 
   it('uses the correct file for includeText=true', () => {
@@ -109,7 +116,9 @@ describe('Logo component', () => {
       includeText: true,
     }
     const wrapper = shallow(<Logo {...mockProps} />)
-    expect(wrapper.find('img').prop('src')).toEqual('logo-with-text.svg')
+    expect(wrapper.find('img').prop('src')).toEqual(
+      '/newtab/logo-with-text.svg'
+    )
   })
 
   it('uses the same file for includeText=true even when another (unsupported) color is provided', () => {
@@ -118,7 +127,9 @@ describe('Logo component', () => {
     mockProps.includeText = true
     mockProps.color = 'white'
     const wrapper = shallow(<Logo {...mockProps} />)
-    expect(wrapper.find('img').prop('src')).toEqual('logo-with-text.svg')
+    expect(wrapper.find('img').prop('src')).toEqual(
+      '/newtab/logo-with-text.svg'
+    )
   })
 
   it('throws an error when passed an invalid color', () => {

src/containers/_app.js

@@ -2,6 +2,7 @@
 /* eslint react/jsx-props-no-spreading: 0 */
 import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
+import App from 'next/app'
 import Head from 'next/head'
 import { get, set } from 'lodash/object'
 import * as Sentry from '@sentry/node'
@@ -35,7 +36,7 @@ if (process.env.SENTRY_DSN) {
   console.warn(`SENTRY_DSN env var not defined. Not initializing Sentry.`)
 }
 
-const App = (props) => {
+const MyApp = (props) => {
   const { AuthUserInfo, Component, pageProps, err } = props
 
   // Optionally, enable or disable the service worker:
@@ -126,7 +127,7 @@ const App = (props) => {
   )
 }
 
-App.getInitialProps = async ({ Component, ctx }) => {
+MyApp.getInitialProps = async ({ ctx, ...otherAppContext }) => {
   const { req, res } = ctx
 
   // Get the AuthUserInfo object.
@@ -164,18 +165,15 @@ App.getInitialProps = async ({ Component, ctx }) => {
     AuthUserInfo
   )
 
-  let pageProps = {}
-  if (Component.getInitialProps) {
-    pageProps = await Component.getInitialProps(ctx)
-  }
+  const appProps = await App.getInitialProps({ ctx, ...otherAppContext })
   return {
-    pageProps,
+    ...appProps,
     AuthUserInfo,
   }
 }
 
-App.displayName = 'App'
-App.propTypes = {
+MyApp.displayName = 'App'
+MyApp.propTypes = {
   AuthUserInfo: PropTypes.shape({
     AuthUser: PropTypes.shape({
       id: PropTypes.string.isRequired,
@@ -192,9 +190,9 @@ App.propTypes = {
   pageProps: PropTypes.object,
 }
 
-App.defaultProps = {
+MyApp.defaultProps = {
   err: undefined,
   pageProps: {},
 }
 
-export default App
+export default MyApp

src/pages/404.js

@@ -0,0 +1,6 @@
+import React from 'react'
+import Error from 'next/error'
+
+export default function NotFound() {
+  return <Error statusCode={404} />
+}