Convert next.config.js to TypeScript (#57883)

Dockerfile

@@ -84,7 +84,7 @@ WORKDIR $APP_HOME
 # Source code
 COPY --chown=node:node src src/
 COPY --chown=node:node package.json ./
-COPY --chown=node:node next.config.js ./
+COPY --chown=node:node next.config.ts ./
 COPY --chown=node:node tsconfig.json ./
 
 # From the clones stage
@@ -125,7 +125,7 @@ WORKDIR $APP_HOME
 # Source code
 COPY --chown=node:node src src/
 COPY --chown=node:node package.json ./
-COPY --chown=node:node next.config.js ./
+COPY --chown=node:node next.config.ts ./
 COPY --chown=node:node tsconfig.json ./
 
 # From clones stage

next.config.ts

@@ -1,42 +1,22 @@
 import fs from 'fs'
 import path from 'path'
+import type { NextConfig } from 'next'
 
 import frontmatter from '@gr2m/gray-matter'
-// Hardcoded log level function since next.config.js cannot import from TypeScript files
-// Matches ./src/observability/logger/lib/log-levels
-function getLogLevelNumber() {
-  const LOG_LEVELS = {
-    error: 0,
-    warn: 1,
-    info: 2,
-    debug: 3,
-  }
+import { getLogLevelNumber } from '@/observability/logger/lib/log-levels'
 
-  let defaultLogLevel = 'info'
-  if (
-    !process.env.LOG_LEVEL &&
-    (process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'test')
-  ) {
-    defaultLogLevel = 'debug'
-  }
-
-  const envLogLevel = process.env.LOG_LEVEL?.toLowerCase() || defaultLogLevel
-  const logLevel = LOG_LEVELS[envLogLevel] !== undefined ? envLogLevel : defaultLogLevel
-
-  return LOG_LEVELS[logLevel]
-}
-
-// Replace imports with hardcoded values
 const ROOT = process.env.ROOT || '.'
 
-// Hard-coded language keys to avoid TypeScript import in config file
+// Language keys are defined here because Next.js config compilation doesn't resolve the @/ path alias
+// Importing from src/languages/lib/languages.ts would fail when it tries to import @/frame/lib/constants
+// This must match the languages defined in src/languages/lib/languages.ts
 const languageKeys = ['en', 'es', 'ja', 'pt', 'zh', 'ru', 'fr', 'ko', 'de']
 
 const homepage = path.posix.join(ROOT, 'content/index.md')
 const { data } = frontmatter(fs.readFileSync(homepage, 'utf8'))
-const productIds = data.children
+const productIds = data.children as string[]
 
-export default {
+const config: NextConfig = {
   // Transpile @primer/react so Next's webpack can process its CSS and other assets
   // This ensures CSS in node_modules/@primer/react is handled by the app's loaders.
   transpilePackages: ['@primer/react'],
@@ -106,3 +86,5 @@ export default {
     styledComponents: true,
   },
 }
+
+export default config

src/observability/logger/lib/log-levels.ts

@@ -4,8 +4,6 @@ The log level is controlled by the `LOG_LEVEL` environment variable, where lower
    if log level is 'info', only 'info', 'warn', and 'error' logs will be output
    if log level is 'debug', all logs will be output
    if log level is 'error', only 'error' logs will be output
-
-NOTE: This file is `.js` because next.config.js does not yet support importing
 */
 export const LOG_LEVELS = {
   error: 0,

src/pages/_error.tsx

@@ -26,7 +26,7 @@ Error.getInitialProps = async (ctx: NextPageContext) => {
     // You can't import `../lib/failbot.js` here in this
     // file because it gets imported by webpack to be used in the
     // client-side JS bundle. It *could* be solved by overriding
-    // the webpack configuration in our `next.config.js` but this is prone
+    // the webpack configuration in our `next.config.ts` but this is prone
     // to be fragile since ignoring code can be hard to get right
     // and the more we override there, the harder it will become to
     // upgrade NextJS in the future because of moving parts.