Next.js + Vercel! ▲ #1
Conversation
…s), and adds Next.js `/news` base route.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| @@ -1 +1 @@ | |||
| v12.18.4 | |||
| 14 | |||
There was a problem hiding this comment.
The move to Next.js didn't require this. Running anything below Node 14 is painful on an M1 Mac, so it was bumped up.
.env.local
Outdated
|
|
||
| NEXT_PUBLIC_SIMORGH_CSP_REPORTING_ENDPOINT=https://ws.bbc-reporting-api.app/report-endpoint | ||
|
|
||
| NEXT_PUBLIC_SIMORGH_OPTIMIZELY_SDK_KEY=LptPKDnHyAFu9V12s5xCz |
There was a problem hiding this comment.
All of these env files moved from an envConfig folder, got renamed to work with Next.js's dotenv convention, and all variables used on the client got prefixed with NEXT_PUBLIC_.
| {children} | ||
| </Helmet> | ||
| </Head> |
There was a problem hiding this comment.
Moved non-dynamic meta and links to _app.js.
| @@ -1,3 +1,3 @@ | |||
| /* eslint-disable import/prefer-default-export */ | |||
|
|
|||
| export scriptPropType from './scripts'; | |||
| export { default as scriptPropType } from './scripts'; | |||
There was a problem hiding this comment.
This was angry... In order to properly re-export an export, they needed to be wrapped in defaults's.
| export { default as vietnamese } from './svgs/vietnamese'; | ||
| export { default as weather } from './svgs/weather'; | ||
| export { default as yoruba } from './svgs/yoruba'; | ||
| export { default as zhongwen } from './svgs/zhongwen'; |
There was a problem hiding this comment.
These were angry... In order to properly re-export an export, they needed to be wrapped in defaults's.
| }; | ||
|
|
||
| this.verbose = (event, message) => { | ||
| fileLogger.log({ file, event, message }); | ||
| // console.log({ file, event, message }); |
There was a problem hiding this comment.
Turned all of these into noops because:
- It was super noisy while doing development. It was hard to debug issues around all the logging.
- It was also logging to the filesystem via
fs, which doesn't really work in Vercel land. If we really want to do this right, we'd setup a log drain.
|
|
||
| return config; | ||
| }, | ||
| }; |
There was a problem hiding this comment.
I know we wanted to do as little custom configuration here as possible, but there's a few things going on here that are unavoidable without massive changes to the project.
- Simorgh uses Emotion for styling, so that needs to be enabled.
- Simorgh uses custom import aliases (ie.
import ArticlePage from '#pages/ArticlePage/ArticlePage') to avoid dot pathing everything, so the Webpack config is enhanced to accommodate this. MomentTimezoneIncludeis a custom Webpack plugin written by the SImorgh team to limit the size of timezones included to reduce bundle size.- And
MomentTimezoneIncludeis why we need to disable lint during builds. It's a cyclical problem. We need Webpack to build the app, so the customMomentTimezoneIncluderuns to create thetzdirectory with the outputted timezones that are imported by other files, but we cannot build the app until it passes lint because imports fail to findtzfiles. This existing process would need to be modified to run before lint and before build (possibly as a separate script).
|
If anyone is looking to run this PR / branch locally, you'll need to create a |
Published blog post with a walkthrough 👉 Migrating a large, open-source React application to Next.js and Vercel