Update Next.js version, refactor language support

components/Footer.tsx

@@ -1,5 +1,6 @@
 import ExplorerLogo from 'ooni-components/svgs/logos/OONI-HorizontalMonochromeInverted.svg'
 import { useIntl } from 'react-intl'
+import Image from 'next/image'
 
 const FooterHead = ({ ...props }) => (
   <div className="font-semibold mb-2.5" {...props} />
@@ -31,7 +32,14 @@ const Footer = () => {
           <div className="py-6 w-full md:w-2/5">
             <div className="flex flex-wrap items-center">
               <div className="p-1 md:mb-4 md:p-0 w-1/2 md:w-full">
-                <ExplorerLogo height="32px" />
+                <Image
+                  src={ExplorerLogo}
+                  alt="OONI Explorer"
+                  height={32}
+                  width={114}
+                  style={{ height: '32px', width: 'auto' }}
+                  unoptimized
+                />
               </div>
               <div className="w-1/2 md:w-2/3">
                 {' '}

components/LocaleSwitcher.tsx

@@ -42,7 +42,8 @@ export const getLocalisedLanguageName = (
   }
 }
 
-const languages = process.env.LOCALES
+import { SUPPORTED_LANGUAGES as languages } from 'lib/i18n'
+
 type LanguageSelectProps = {
   onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void
   value: string

components/NavBar.tsx

@@ -40,8 +40,6 @@ const NavItem = ({ label, href, ...props }: NavItemProps) => {
   )
 }
 
-const languages = process.env.LOCALES
-
 export const NavBar = () => {
   const router = useRouter()
   const { pathname } = router

lib/i18n.js

@@ -0,0 +1,19 @@
+const DEFAULT_LOCALE = 'en'
+
+const SUPPORTED_LANGUAGES = [
+  'ar',
+  'de',
+  'en',
+  'es',
+  'id',
+  // 'ja',
+  // 'kab',
+  'km',
+  'pt-br',
+  'ru',
+  'sr',
+  'tr',
+  'zh-cn',
+]
+
+module.exports = { DEFAULT_LOCALE, SUPPORTED_LANGUAGES }

next.config.js

@@ -1,134 +1,73 @@
 /** @type {import('next').NextConfig} */
 const { withSentryConfig } = require('@sentry/nextjs')
 
-const withBundleAnalyzer = require('@next/bundle-analyzer')({
-  enabled: process.env.ANALYZE === 'true',
-})
-
-const webpack = require('webpack')
-const glob = require('glob')
-const { basename } = require('node:path')
-
-const LANG_DIR = './public/static/lang/'
-const DEFAULT_LOCALE = 'en'
-
-function getSupportedLanguages() {
-  const supportedLanguages = new Set()
-  supportedLanguages.add(DEFAULT_LOCALE) // at least 1 supported language
-  // biome-ignore lint/complexity/noForEach: <explanation>
-  glob
-    .sync(`${LANG_DIR}/**/*.json`)
-    .forEach((f) => supportedLanguages.add(basename(f, '.json')))
-  return [...supportedLanguages]
-}
-
-module.exports = withBundleAnalyzer(
-  withSentryConfig(
-    {
-      output: 'standalone',
-      reactStrictMode: true,
-      swcMinify: true,
-      i18n: {
-        locales: getSupportedLanguages(),
-        defaultLocale: DEFAULT_LOCALE,
-      },
-      async headers() {
-        const headers = []
-        if (process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview') {
-          headers.push({
-            headers: [
-              {
-                key: 'X-Robots-Tag',
-                value: 'noindex',
-              },
-            ],
-            source: '/:path*',
-          })
-        }
-        return headers
-      },
-      async rewrites() {
-        return [
-          {
-            source: '/apple-app-site-association',
-            destination: '/api/apple-app-site-association',
-          },
-          {
-            source: '/.well-known/assetlinks.json',
-            destination: '/api/assetlinks',
-          },
-          {
-            source: '/api/v2/:path*',
-            destination: `${process.env.NEXT_PUBLIC_OONI_API}/api/v2/:path*`,
-          },
-        ]
-      },
-      webpack: (config, options) => {
-        config.plugins.push(
-          new options.webpack.DefinePlugin({
-            'process.env.DEFAULT_LOCALE': DEFAULT_LOCALE,
-            'process.env.LOCALES': JSON.stringify(getSupportedLanguages()),
-          }),
-        )
-
-        config.plugins.push(
-          new webpack.IgnorePlugin({
-            resourceRegExp: /\.\/lib\/update/,
-          }),
-        )
-
-        // Grab the existing rule that handles SVG imports
-        const fileLoaderRule = config.module.rules.find((rule) =>
-          rule.test?.test?.('.svg'),
-        )
-
-        config.module.rules.push(
-          // Convert all *.svg imports to React components
-          {
-            test: /\.svg$/i,
-            issuer: /\.[jt]sx?$/,
-            use: ['@svgr/webpack'],
-          },
-        )
-
-        // Modify the file loader rule to ignore *.svg, since we have it handled
-        fileLoaderRule.exclude = /\.svg$/i
-
-        return config
+const { DEFAULT_LOCALE, SUPPORTED_LANGUAGES } = require('./lib/i18n')
+
+module.exports = withSentryConfig(
+  {
+    output: 'standalone',
+    reactStrictMode: true,
+    turbopack: {
+      rules: {
+        '*.svg': {
+          loaders: ['@svgr/webpack'],
+          as: '*.js',
+        },
       },
     },
-    {
-      // For all available options, see:
-      // https://github.com/getsentry/sentry-webpack-plugin#options
-      org: 'ooni',
-      project: 'run',
-      sentryUrl: 'https://sentry.io/',
-
-      // Only print logs for uploading source maps in CI
-      silent: !process.env.CI,
-
-      // For all available options, see:
-      // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
-      // Upload a larger set of source maps for prettier stack traces (increases build time)
-      widenClientFileUpload: true,
-
-      // Uncomment to route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
-      // This can increase your server load as well as your hosting bill.
-      // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
-      // side errors will fail.
-      // tunnelRoute: "/monitoring",
-
-      // Hides source maps from generated client bundles
-      hideSourceMaps: true,
-
-      // Automatically tree-shake Sentry logger statements to reduce bundle size
-      disableLogger: true,
-
-      // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
-      // See the following for more information:
-      // https://docs.sentry.io/product/crons/
-      // https://vercel.com/docs/cron-jobs
-      automaticVercelMonitors: true,
+    i18n: {
+      locales: SUPPORTED_LANGUAGES,
+      defaultLocale: DEFAULT_LOCALE,
+    },
+    async headers() {
+      const headers = []
+      if (process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview') {
+        headers.push({
+          headers: [
+            {
+              key: 'X-Robots-Tag',
+              value: 'noindex',
+            },
+          ],
+          source: '/:path*',
+        })
+      }
+      return headers
+    },
+    async rewrites() {
+      return [
+        {
+          source: '/apple-app-site-association',
+          destination: '/api/apple-app-site-association',
+        },
+        {
+          source: '/.well-known/assetlinks.json',
+          destination: '/api/assetlinks',
+        },
+        {
+          source: '/api/v2/:path*',
+          destination: `${process.env.NEXT_PUBLIC_OONI_API}/api/v2/:path*`,
+        },
+      ]
     },
-  ),
+  },
+  {
+    org: 'ooni',
+    project: 'run',
+    sentryUrl: 'https://sentry.io/',
+
+    // Only print logs for uploading source maps in CI
+    silent: !process.env.CI,
+
+    // For all available options, see:
+    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+    widenClientFileUpload: true,
+
+    // Uncomment to route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
+    // tunnelRoute: "/monitoring",
+
+    hideSourceMaps: true,
+    disableLogger: true,
+    automaticVercelMonitors: true,
+  },
 )

package.json

@@ -4,16 +4,16 @@
   "license": "BSD-3-Clause",
   "dependencies": {
     "@hookform/resolvers": "^3.6.0",
-    "@next/bundle-analyzer": "^14.2.5",
-    "@sentry/nextjs": "^8",
+    "@sentry/nextjs": "^10.66.0",
+    "@tailwindcss/postcss": "^4.3.3",
     "@uiw/react-color-compact": "^2.3.0",
     "axios": "^1.16.0",
     "cookie": "^0.7.0",
     "date-fns": "^3.6.0",
     "markdown-to-jsx": "^7.4.7",
-    "next": "^14.2.35",
+    "next": "^16.2.10",
     "nprogress": "^0.2.0",
-    "ooni-components": "0.7.0-alpha.12",
+    "ooni-components": "0.8.0-alpha.3",
     "react": "^18.3.1",
     "react-content-loader": "^7.0.2",
     "react-day-picker": "^9.0.8",
@@ -28,7 +28,6 @@
     "yup": "^1.7.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.29.6",
     "@biomejs/biome": "^1.6.4",
     "@formatjs/cli": "^6.2.7",
     "@playwright/test": "^1.42.1",
@@ -40,12 +39,10 @@
     "@types/react-dom": "^18.2.21",
     "@types/react-outside-click-handler": "^1.3.3",
     "autoprefixer": "^10.4.20",
-    "babelify": "^10.0.0",
-    "browserify": "^17.0.0",
     "json2csv": "^6.0.0-alpha.2",
     "msw": "^2.2.13",
     "postcss": "^8.5.10",
-    "tailwindcss": "^3.4.10",
+    "tailwindcss": "^4.3.3",
     "typescript": "^5.4.3",
     "uglify-js": "^3.17.4"
   },
@@ -57,7 +54,6 @@
     "start": "next start -p 3100",
     "build": "next build",
     "test": "playwright test",
-    "build:analyze": "ANALYZE=true next build",
     "extract": "node ./scripts/extract '{pages,components,utils}/*.{js,ts,tsx}'",
     "script:build-translations": "node ./scripts/build-translations.js"
   },

pages/404.tsx

@@ -3,7 +3,7 @@ import { useRouter } from 'next/router'
 import { FormattedMessage, useIntl } from 'react-intl'
 
 import OONIRunHero from 'components/OONIRunHero'
-import OONI404 from 'public/static/images/OONI_404.svg'
+import OONI404 from '@/public/static/images/OONI_404.svg'
 
 const Custom404 = () => {
   const router = useRouter()

pages/_app.tsx

@@ -1,8 +1,8 @@
 import { Fira_Sans } from 'next/font/google'
 import { useRouter } from 'next/router'
 import NProgress from 'nprogress'
-import 'ooni-components/dist/tailwind.css'
 import { useEffect, useMemo } from 'react'
+import 'styles/globals.css'
 import '../public/static/nprogress.css'
 
 import type { AppProps } from 'next/app'

pages/list.tsx

@@ -3,7 +3,7 @@ import type { GetServerSideProps } from 'next'
 import dynamic from 'next/dynamic'
 import NLink from 'next/link'
 import { useIntl } from 'react-intl'
-import OONI404 from '/public/static/images/OONI_404.svg'
+import OONI404 from '@/public/static/images/OONI_404.svg'
 
 const RunLinkList = dynamic(() => import('components/List'))
 const OONIRunHero = dynamic(() => import('components/OONIRunHero'))

pages/v2/[linkId].tsx

@@ -10,7 +10,7 @@ import type { GetServerSideProps } from 'next'
 import type { ParsedUrlQuery } from 'node:querystring'
 import { useIntl } from 'react-intl'
 import { getIntentURIv2 } from 'utils/links'
-import OONI404 from '/public/static/images/OONI_404.svg'
+import OONI404 from '@/public/static/images/OONI_404.svg'
 
 const useragent = require('useragent/index.js')
 

postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}
+
+export default config

styles/globals.css

@@ -0,0 +1,12 @@
+@import 'tailwindcss';
+
+/* Dynamic classes in CountryBox: `lg:grid-cols-${itemsPerRow}` — Tailwind cannot see 4/6 */
+@source inline('{lg:,}grid-cols-{4,6}');
+
+@import 'ooni-components/dist/tailwind.css';
+
+@layer base {
+    a {
+      @apply text-blue-600;
+    }
+  }

tsconfig.json

@@ -10,11 +10,14 @@
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true
+    "jsx": "react-jsx",
+    "incremental": true,
+    "paths": {
+      "@/*": ["./*"]
+    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"],