Example of building a next.js app

[alexeagle]

Start from a copy of https://github.com/vercel/next.js/tree/v12.1.6/examples/blog-starter-typescript and get the existing build system supplied by next to work when wrapped by Bazel.

[alexeagle]

Started this here: https://github.com/aspect-build/bazel-examples/tree/next/next.js

currently failing in an interesting way - the first build fails

$ bazel clean; bazel build :build
INFO: Starting clean (this may take a while). Consider using --async if the clean takes more than several minutes.
INFO: Analyzed target //:build (65 packages loaded, 362 targets configured).
INFO: Found 1 target...
ERROR: /home/alexeagle/Projects/bazel-examples/next.js/BUILD.bazel:13:9: RunBinary build failed: (Exit 1): build__js_binary.sh failed: error executing command bazel-out/k8-opt-exec-2B5CBBC6/bin/build__js_binary.sh build

Use --sandbox_debug to see verbose messages from the sandbox and retain the sandbox build root for debugging
It looks like you're trying to use TypeScript but do not have the required package(s) installed.

Please install @types/react and @types/node by running:

	npm install --save-dev @types/react @types/node

If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your pages directory).

info  - Checking validity of types...
Target //:build failed to build

but then immediately try to build again, and due to #114 (I suspect) you get a different failure:

$ bazel build :build
INFO: Analyzed target //:build (1 packages loaded, 225 targets configured).
INFO: Found 1 target...
ERROR: /home/alexeagle/Projects/bazel-examples/next.js/BUILD.bazel:13:9: Copying file bazel-bin/components/hero-post.tsx failed: (Exit 1): bash failed: error executing command /bin/bash -c 'cp -f "$1" "$2"' '' bazel-bin/components/hero-post.tsx bazel-out/k8-fastbuild/bin/bazel-bin/components/hero-post.tsx
cp: cannot stat 'bazel-bin/components/hero-post.tsx': No such file or directory
... more ...

[alexeagle]

Note, https://github.com/aspect-build/bazel-examples/pull/44 is also pending work on top of the branch

[alexeagle]

https://github.com/aspect-build/bazel-examples/commit/cc7e16f3a79f48a0e8083a7f5704c6e6268bcd4b shows the working next.js workflows under Bazel.

A couple of notes;

• It required a bit of hacking, creating an entry point for running next.js which is outside of the node_modules tree where the tool lives. This works around an issue where next.js will resolve into the wrong node_modules.
• The next.js devserver doesn't seem to tolerate running in a tree with symlinks. When ibazel updates the bazel-out tree on an incremental rebuild, the changes don't appear in the next.js app unless the devserver is restarted. This is possibly a bigger scope to resolve, and might require changes in that devserver so we can tell it when to reload from disk rather than whatever filesystem monitor it uses now (similar to what aspect-build/rules_webpack does for webpack's dev server)