Upgrade Next.js to ^12.1.0
Upgrade next-transpile-modules to ^9.0.0
Install the NewRelic Next.js agent "@newrelic/next": "0.1.0",
Change the dev command to next dev
Change the start command to NODE_OPTIONS='-r @newrelic/next' next start
Change the build command to next build only (dropping && tsc --project tsconfig.server.json) and delete tsconfig.server.json file
Remove nodemon dependency and delete nodemon.json file
2. Changes to next.config.js
Confgiure local development proxy layer by changing rewrites to:
async rewrites ( ) {
const rewrites = [
{
source : '/healthcheck' ,
destination : '/api/healthcheck' ,
} ,
] ;
if ( process . env . NODE_ENV !== 'production' ) {
rewrites . push ( {
source : '/gateway/:slug*' ,
destination : `${ process . env . API_BASE_URL } ,
basePath : false ,
} ) ;
}
return rewrites ;
} ,
Remove compress: false since this was required by the custom server
Update assetPrefix to process.env.NODE_ENV === 'production' ? '/app/static/content-next-app' : '',
Remove custom font loader entirely in favor of the upgraded next-transpile-modules
config . module . rules . push ( {
test : / \.(woff(2)?|eot|ttf|otf)(\?v=\d+\.\d+\.\d+)?$/ ,
dependency : { not : [ 'url' ] } ,
type : 'javascript/auto' ,
generator : { filename : 'static/fonts/[name]-[hash].[ext]' } ,
} ) ;
Add NEW_RELIC_NO_CONFIG_FILE="true" \ to Docker/Startupfile
Delete .next directory before restarting local dev server for testing (The file structure has changed between next11 -> next12 which otherwise causes loading errors)
Add the following to .gitignore
# TypeScript incremental compilation cache
*.tsbuildinfo
Update _document.tsx to include NewRelic client agent in DocumentScriptContainer
interface MyDocumentProps extends DocumentProps {
newrelicBrowserAgentScript : string ;
}
export default class MyDocument extends Document < MyDocumentProps > {
static async getInitialProps ( ctx : DocumentContext ) {
const initialProps = await Document . getInitialProps ( ctx ) ;
// eslint-disable-next-line global-require
const newrelic = require ( 'newrelic' ) ; // eslint-disable-line @typescript-eslint/no-var-requires
const newrelicBrowserAgentScript = newrelic . getBrowserTimingHeader ( ) ;
return { ...initialProps , newrelicBrowserAgentScript } ;
}
// ...
render ( ) : ReactElement {
const { newrelicBrowserAgentScript } = this . props ;
return (
< Html { ...htmlAttributes } >
< Head >
< DocumentScriptContainer
documentScriptConfig = { { ...documentScriptConfig , newrelicBrowserAgentScript } }
/ >
< / Head >
{ /* ... */ }
< / Html >
) ;
}
}
Configure NewRelic similarly to previous config (app name, etc.)
Migrate Babel config to SWC so that we can leverage Rust compiler for faster development and production build times
Leverage next lint instead of eslint directly
