Next.js Initial Migration

.gitignore

@@ -136,5 +136,6 @@ storybook-static/
 /e2e_testing/playwright/.cache/
 !/e2e_testing/.env
 
+/**/.yarn/cache
 e2e_testing/.yarn/cache
 .swc

.prettierignore

@@ -1,2 +1,3 @@
 openapi/specs/*
 .yarn/
+.next/

frontends/api/package.json

@@ -9,7 +9,8 @@
     "./hooks/*": "./src/hooks/*/index.ts",
     "./constants": "./src/common/constants.ts",
     "./test-utils/factories": "./src/test-utils/factories/index.ts",
-    "./test-utils": "./src/test-utils/index.ts"
+    "./test-utils": "./src/test-utils/index.ts",
+    "./ssr": "./src/ssr.ts"
   },
   "peerDependencies": {
     "react": "18.3.1"
@@ -18,6 +19,7 @@
     "@faker-js/faker": "^8.0.0",
     "@testing-library/react": "16.0.1",
     "enforce-unique": "^1.3.0",
+    "jest": "^29.7.0",
     "jest-when": "^3.6.0",
     "lodash": "^4.17.21",
     "ol-test-utilities": "0.0.0"

frontends/api/src/axios.ts

@@ -4,10 +4,11 @@ import axios from "axios"
  * Our axios instance with default baseURL, headers, etc.
  */
 const instance = axios.create({
-  xsrfCookieName: APP_SETTINGS.CSRF_COOKIE_NAME,
+  xsrfCookieName: process.env.NEXT_PUBLIC_CSRF_COOKIE_NAME,
   xsrfHeaderName: "X-CSRFToken",
   withXSRFToken: true,
-  withCredentials: APP_SETTINGS.MITOL_AXIOS_WITH_CREDENTIALS,
+  withCredentials:
+    process.env.NEXT_PUBLIC_MITOL_AXIOS_WITH_CREDENTIALS === "true",
 })
 
 export default instance

frontends/api/src/clients.ts

@@ -24,7 +24,9 @@ import {
 
 import axiosInstance from "./axios"
 
-const { MITOL_API_BASE_URL } = APP_SETTINGS
+const MITOL_API_BASE_URL = (<any>process).browser
+  ? process.env.NEXT_PUBLIC_MITOL_API_BASE_URL
+  : process.env.MITOL_API_BASE_URL
 
 const BASE_PATH = MITOL_API_BASE_URL?.replace(/\/+$/, "") ?? ""
 

frontends/api/src/ssr.ts

@@ -0,0 +1,10 @@
+export {
+  isServer,
+  Hydrate,
+  QueryClient,
+  QueryClientProvider,
+  dehydrate,
+  useQueries,
+} from "@tanstack/react-query"
+
+export type { UseQueryResult, UseQueryOptions } from "@tanstack/react-query"

frontends/api/src/test-utils/factories/channels.ts

@@ -50,7 +50,7 @@ const departmentChannel: PartialFactory<DepartmentChannel> = (
     { channel_type: ChannelTypeEnum.Department },
     {
       configuration: {
-        banner_background: "/static/images/unit_banners/mitpe.jpg",
+        banner_background: "/images/unit_banners/mitpe.jpg",
         heading: "test",
         logo: "/static/test.svg",
         name: "test",
@@ -73,7 +73,7 @@ const topicChannel: PartialFactory<TopicChannel> = (overrides = {}) => {
     { channel_type: ChannelTypeEnum.Topic },
     {
       configuration: {
-        banner_background: "/static/images/unit_banners/mitpe.jpg",
+        banner_background: "/images/unit_banners/mitpe.jpg",
         heading: "test",
         logo: "/static/test.svg",
         name: "test",
@@ -96,7 +96,7 @@ const unitChannel: PartialFactory<UnitChannel> = (overrides = {}) => {
     { channel_type: ChannelTypeEnum.Unit },
     {
       configuration: {
-        banner_background: "/static/images/unit_banners/mitpe.jpg",
+        banner_background: "/images/unit_banners/mitpe.jpg",
         heading: "test",
         logo: "/static/test.svg",
         name: "test",

frontends/jest.config.ts

@@ -10,6 +10,7 @@ const projectsConfig: Config.InitialOptions = {
   collectCoverage: true,
   coverageDirectory: "coverage",
   projects: ["<rootDir>/*/jest.config.ts"],
+  modulePathIgnorePatterns: ['<rootDir>/mit-learn/'],
   watchPlugins: [
     "jest-watch-typeahead/filename",
     "jest-watch-typeahead/testname",

frontends/main/.env.example

@@ -0,0 +1,10 @@
+NEXT_PUBLIC_ORIGIN=http://open.odl.local:8062
+NEXT_PUBLIC_MITOL_API_BASE_URL=http://open.odl.local:8063
+MITOL_API_BASE_URL=http://open.odl.local:8063
+
+NEXT_PUBLIC_PUBLIC_URL=/
+NEXT_PUBLIC_SITE_NAME=MIT Learn
+NEXT_PUBLIC_MITOL_SUPPORT_EMAIL=mitlearn-support@mit.edu
+NEXT_PUBLIC_EMBEDLY_KEY=
+NEXT_PUBLIC_MITOL_AXIOS_WITH_CREDENTIALS=true
+NEXT_PUBLIC_CSRF_COOKIE_NAME=csrftoken-local # Must match CSRF_COOKIE_NAME on the backend's environment

frontends/main/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

frontends/main/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

frontends/main/jest.config.ts

@@ -0,0 +1,27 @@
+import path, { resolve } from "path"
+import type { Config } from "@jest/types"
+import baseConfig from "../jest.jsdom.config"
+
+const config: Config.InitialOptions = {
+  ...baseConfig,
+  setupFilesAfterEnv: [
+    ...baseConfig.setupFilesAfterEnv,
+    resolve(__dirname, "./test-utils/setupJest.ts"),
+  ],
+  moduleNameMapper: {
+    "^@/(.*)$": resolve(__dirname, "src/$1"),
+    "^@/test-utils$": resolve(__dirname, "test-utils"),
+    ...baseConfig.moduleNameMapper,
+  },
+  transformIgnorePatterns: ["/node_modules/(?!(" + "yaml", ")/)"],
+  globals: {
+    APP_SETTINGS: {
+      EMBEDLY_KEY: "embedly_key",
+      MITOL_API_BASE_URL: "https://api.test.learn.mit.edu",
+      PUBLIC_URL: "",
+      SITE_NAME: "MIT Learn",
+    },
+  },
+}
+
+export default config

frontends/main/next.config.js

@@ -0,0 +1,116 @@
+// @ts-check
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  webpack: (
+    config,
+    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack },
+  ) => {
+    config.plugins.push(
+      new webpack.IgnorePlugin({
+        resourceRegExp: /\.test\.tsx$/,
+      }),
+      new webpack.IgnorePlugin({
+        resourceRegExp: /mockAxios\.ts/,
+      }),
+    )
+
+    // Do not do this. Added to fix "import type", but causes a strage issue where
+    // the root page and layout think they're Client Components and "use client"
+    // directives not properly respected.
+    // https://nextjs.org/docs/app/api-reference/next-config-js/webpack
+    //
+    // config.module.rules.push({
+    //   test: /\.tsx?$/,
+    //   use: [defaultLoaders.babel],
+    // })
+
+    return config
+  },
+
+  async rewrites() {
+    return [
+      /* Images moved from /static, though image paths are sometimes
+       * returned on the API, e.g. /api/v0/channels/type/unit/ocw/
+       * TODO update API paths and remove the rewrite.
+       */
+      {
+        source: "/static/images/:path*",
+        destination: "/images/:path*",
+      },
+    ]
+  },
+
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "*.mit.edu",
+        port: "",
+        pathname: "**",
+      },
+      {
+        protocol: "https",
+        hostname: "i.embed.ly",
+        port: "",
+        pathname: "**",
+      },
+      {
+        protocol: "https",
+        hostname: "ol-xpro-app-production.s3.amazonaws.com",
+        port: "",
+        pathname: "**",
+      },
+      {
+        protocol: "https",
+        hostname: "*.cloudfront.net",
+        port: "",
+        pathname: "**",
+      },
+      {
+        protocol: "https",
+        hostname: "*.edx-cdn.org",
+        port: "",
+        pathname: "**",
+      },
+      {
+        protocol: "https",
+        hostname: "i.ytimg.com",
+        port: "",
+        pathname: "**",
+      },
+      {
+        protocol: "https",
+        hostname: "i1.sndcdn.com",
+        port: "",
+        pathname: "**",
+      },
+      {
+        protocol: "https",
+        hostname: "*.medium.com",
+        port: "",
+        pathname: "**",
+      },
+      {
+        protocol: "https",
+        hostname: "image.simplecastcdn.com",
+        port: "",
+        pathname: "**",
+      },
+      {
+        protocol: "https",
+        hostname: "megaphone.imgix.net",
+        port: "",
+        pathname: "**",
+      },
+      {
+        protocol: "https",
+        hostname: "artwork.captivate.fm",
+        port: "",
+        pathname: "**",
+      },
+    ],
+  },
+}
+
+module.exports = nextConfig