feat: demonstrate next.js v14

frontend/.bazelignore

@@ -1,5 +1,6 @@
 node_modules
 next.js/node_modules
+next.js14/node_modules
 packages/one/node_modules
 react/node_modules
 react-webpack/node_modules

frontend/MODULE.bazel

@@ -9,6 +9,10 @@ bazel_dep(name = "aspect_rules_ts", version = "2.2.0")
 bazel_dep(name = "aspect_rules_rollup", version = "1.0.2")
 bazel_dep(name = "aspect_rules_webpack", version = "0.14.0")
 bazel_dep(name = "bazel_skylib", version = "1.5.0")
+bazel_dep(name = "rules_nodejs", version = "6.1.0")
+
+node = use_extension("@rules_nodejs//nodejs:extensions.bzl", "node", dev_dependency = True)
+node.toolchain(node_version = "18.17.0")
 
 pnpm = use_extension("@aspect_rules_js//npm:extensions.bzl", "pnpm", dev_dependency = True)
 use_repo(pnpm, "pnpm")

frontend/next.js/BUILD.bazel

@@ -74,9 +74,5 @@ build_test(
     name = "build_test",
     targets = [
         ":next",
-        # Not build testing the `:next_export` target since this `next export` writes back to the `.next` directory which
-        # causes issues with trying to write to an input. See https://github.com/vercel/next.js/issues/43344.
-        # TODO: fix in Next.js (https://github.com/vercel/next.js/issues/43344) or find work-around.
-        # ":next_export",
     ],
 )

frontend/next.js14/.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

frontend/next.js14/BUILD.bazel

@@ -0,0 +1,45 @@
+load("@aspect_rules_js//js:defs.bzl", "js_library", "js_test")
+load("@aspect_rules_ts//ts:defs.bzl", "ts_config")
+load("@bazel_skylib//rules:build_test.bzl", "build_test")
+load("@npm//:defs.bzl", "npm_link_all_packages")
+load("@npm//next.js14:next/package_json.bzl", next_bin = "bin")
+load(":defs.bzl", "next")
+
+npm_link_all_packages(name = "node_modules")
+
+next_bin.next_binary(
+    name = "next_js_binary",
+    visibility = ["//visibility:public"],
+)
+
+ts_config(
+    name = "tsconfig",
+    src = "tsconfig.json",
+    visibility = ["//visibility:public"],
+)
+
+next(
+    name = "next",
+    srcs = [
+        "//next.js14/src/app",
+        "//next.js14/public",
+    ],
+    data = [
+        "next.config.mjs",
+        "package.json",
+        ":node_modules/@bazel-example/one",
+        ":node_modules/next",
+        ":node_modules/react",
+        ":node_modules/react-dom",
+        ":node_modules/typescript",
+    ],
+    next_bin = "./node_modules/next/dist/bin/next",
+    next_js_binary = ":next_js_binary",
+)
+
+build_test(
+    name = "build_test",
+    targets = [
+        ":next",
+    ],
+)

frontend/next.js14/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.

frontend/next.js14/defs.bzl

@@ -0,0 +1,189 @@
+"""Wrapper macro to make the next.js rules more ergonomic.
+
+This might be upstreamed to a "contrib" folder in rules_js at some point.
+Follow https://github.com/aspect-build/rules_js/issues/1292
+"""
+
+load("@aspect_rules_js//js:defs.bzl", "js_run_binary", "js_run_devserver")
+
+def next(
+        name,
+        srcs,
+        data,
+        next_js_binary,
+        next_bin,
+        next_build_out = ".next",
+        next_export_out = "out",
+        **kwargs):
+    """Generates Next.js targets build, dev & start targets.
+
+    `{name}`       - a js_run_binary build target that runs `next build`
+    `{name}_dev`   - a js_run_devserver binary target that runs `next dev`
+    `{name}_start` - a js_run_devserver binary target that runs `next start`
+
+    Use this macro in the BUILD file at the root of a next app where the `next.config.js` file is
+    located.
+
+    For example, a target such as
+
+    ```
+    next(
+        name = "next",
+        srcs = [
+            "//next.js/pages",
+            "//next.js/public",
+            "//next.js/styles",
+        ],
+        data = [
+            "//next.js:node_modules/next",
+            "//next.js:node_modules/react-dom",
+            "//next.js:node_modules/react",
+            "//next.js:node_modules/typescript",
+            "next.config.js",
+            "package.json",
+        ],
+        next_bin = "../../node_modules/.bin/next",
+        next_js_binary = "//:next_js_binary",
+    )
+    ```
+
+    in an `next.js/BUILD.bazel` file where the root `BUILD.bazel` file has
+    next linked to `node_modules` and the `next_js_binary`:
+
+    ```
+    load("@npm//:defs.bzl", "npm_link_all_packages")
+    load("@npm//:next/package_json.bzl", next_bin = "bin")
+
+    npm_link_all_packages(name = "node_modules")
+
+    next_bin.next_binary(
+        name = "next_js_binary",
+        visibility = ["//visibility:public"],
+    )
+    ```
+
+    will create the targets:
+
+    ```
+    //next.js:next
+    //next.js:next_dev
+    //next.js:next_start
+    ```
+
+    To build the above next app, equivalent to running
+    `next build` outside Bazel, run,
+
+    ```
+    bazel build //next.js:next
+    ```
+
+    To run the development server in watch mode with
+    [ibazel](https://github.com/bazelbuild/bazel-watcher), equivalent to running
+    `next dev` outside Bazel, run
+
+    ```
+    ibazel run //next.js:next_dev
+    ```
+
+    To run the production server in watch mode with
+    [ibazel](https://github.com/bazelbuild/bazel-watcher), equivalent to running
+    `next start` outside Bazel,
+
+    ```
+    ibazel run //next.js:next_start
+    ```
+
+    To export the above next app, equivalent to running
+    `next export` outside Bazel, run,
+
+    ```
+    bazel build //next.js:next_export
+    ```
+
+    Args:
+        name: The name of the build target.
+
+        srcs: Source files to include in build & dev targets.
+            Typically these are source files or transpiled source files in Next.js source folders
+            such as `pages`, `public` & `styles`.
+
+        data: Data files to include in all targets.
+            These are typically npm packages required for the build & configuration files such as
+            package.json and next.config.js.
+
+        next_js_binary: The next js_binary. Used for the `build `target.
+
+            Typically this is a js_binary target created using `bin` loaded from the `package_json.bzl`
+            file of the npm package.
+
+            See main docstring above for example usage.
+
+        next_bin: The next bin command. Used for the `dev` and `start` targets.
+
+            Typically the path to the next entry point from the current package. For example `./node_modules/.bin/next`,
+            if next is linked to the current package, or a relative path such as `../node_modules/.bin/next`, if next is
+            linked in the parent package.
+
+            See main docstring above for example usage.
+
+        next_build_out: The `next build` output directory. Defaults to `.next` which is the Next.js default output directory for the `build` command.
+
+        next_export_out: The `next export` output directory. Defaults to `out` which is the Next.js default output directory for the `export` command.
+
+        **kwargs: Other attributes passed to all targets such as `tags`.
+    """
+
+    tags = kwargs.pop("tags", [])
+
+    # `next build` creates an optimized bundle of the application
+    # https://nextjs.org/docs/api-reference/cli#build
+    js_run_binary(
+        name = name,
+        tool = next_js_binary,
+        args = ["build"],
+        srcs = srcs + data,
+        out_dirs = [next_build_out],
+        chdir = native.package_name(),
+        tags = tags,
+        **kwargs
+    )
+
+    # `next dev` runs the application in development mode
+    # https://nextjs.org/docs/api-reference/cli#development
+    js_run_devserver(
+        name = "{}_dev".format(name),
+        command = next_bin,
+        args = ["dev"],
+        data = srcs + data,
+        chdir = native.package_name(),
+        tags = tags,
+        **kwargs
+    )
+
+    # `next start` runs the application in production mode
+    # https://nextjs.org/docs/api-reference/cli#production
+    js_run_devserver(
+        name = "{}_start".format(name),
+        command = next_bin,
+        args = ["start"],
+        data = data + [name],
+        chdir = native.package_name(),
+        tags = tags,
+        **kwargs
+    )
+
+    # `next export` runs the application in production mode
+    # https://nextjs.org/docs/api-reference/cli#production
+    js_run_binary(
+        name = "{}_export".format(name),
+        tool = next_js_binary,
+        args = ["export"],
+        srcs = data + [name],
+        out_dirs = [next_export_out],
+        chdir = native.package_name(),
+        # Tagged as "manual" since this `next export` writes back to the `.next` directory which causes issues with
+        # trying to write to an input. See https://github.com/vercel/next.js/issues/43344.
+        # TODO: fix in Next.js (https://github.com/vercel/next.js/issues/43344) or find work-around.
+        tags = tags + ["manual"],
+        **kwargs
+    )

frontend/next.js14/next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

frontend/next.js14/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "my-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@bazel-example/one": "workspace:*",
+    "@types/is-even": "1.0.1",
+    "next": "14.2.3",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "typescript": "^5"
+  }
+}

frontend/next.js14/public/BUILD.bazel

@@ -0,0 +1,10 @@
+load("@aspect_rules_js//js:defs.bzl", "js_library")
+
+js_library(
+    name = "public",
+    srcs = [
+        "next.svg",
+        "vercel.svg",
+    ],
+    visibility = ["//next.js14:__subpackages__"],
+)