Old Time Tunes Dev Log 2: Adding Next.js

This is a long-running series of logs that I'm sharing with my spouse to incrementally share everything I do to contribute to our project Old Time Tunes. My goal is to make tiny records of what it takes to build a web platform.

When I made the UI prototype last year, I used Angular. But now that I'm familiar with Next.js for React development, I'm bringing it into the repo.

Nx, the monorepo management tool, makes it easy to set up and add a Next.js app to the repo. I went to https://nx.dev/nx-api/next#nxnext to check what CLI commands to run. I ran npx nx add @nx/next to add Next.js.

~/dev/GitHub/old-time-tunes git:[main]
nx add @nx/next

✔ Installing @nx/next@19.8.2...
✔ Initializing @nx/next...

 NX   Package @nx/next added successfully.

This added the npm packages needed to run Next.js (including react and eslint rules like eslint-config-next and eslint-plugin-react).

I committed this as chore: add next.

Now that I have Nx support for Next.js, I was ready to create a new, empty Next app. There's CLI commands you can run in Nx, but I always use the Nx GUI in my IDE. The Nx docsite shows how to run generate commands from VSCode- https://nx.dev/recipes/nx-console/console-generate-command.
I use WebStorm instead of VSCode but it has a nearly identical Nx plugin. I used the GUI form to set a name and directory for the new app, and it generated this command to create the app: nx g @nx/next:application --name=ott-app --directory=apps/ott-app --projectNameAndRootFormat=as-provided --no-interactive.

Finally, I wanted to test that the empty app works. I tried to build it using the Nx IDE plugin which has an option to serve the app (which uses the command nx run ott-app:serve). But I hit a failure with the next.config.js file which, after some research, appears to incorrectly be using old an Javascript format (using require instead of import and module.exports = instead of export default). I updated the import and export statements in the file, and then ran the serve command again.

/Users/david/dev/GitHub/old-time-tunes/node_modules/.bin/nx run ott-app:serve

> nx run ott-app:serve:development

  ▲ Next.js 14.2.3
  - Local:        http://localhost:4200

 ✓ Starting...

The app ran successfully this time!