Full example of Next.js application

[xnerhu]

🚀 feature request

Description

In the past there was some work done to make an example of Next.js application. Unfortunately nothing was finished. In my opinion Bazel is perfect for backend, but not so for frontend at this stage.

I'm starting the initiative to make a fully fledged Next.js example including common package compiled with webpack. This is the most often use case after all. And of course support for all platforms including non-sandboxed.

Looking at #2066 and other examples brought me to this setup.

https://github.com/xnerhu/bazel-nextjs-example

But there are some major issues.

1. Windows

Workflow

[webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Resolving
'../../../../../../../users/xnerhu/_bazel/jeicd5rv/execroot/init/node_modules/babel-plugin-styled-components/lib/index' in
C:\projects\project\node_modules\next\dist\compiled\babel for build dependencies doesn't lead to expected result
'C:\users\xnerhu\_bazel\jeicd5rv\execroot\init\node_modules\babel-plugin-styled-components\lib\index.js', but to
'C:\users\xnerhu\_bazel\jeicd5rv\execroot\init\external\npm\node_modules\babel-plugin-styled-components\lib\index.js'
instead. Resolving dependencies are ignored for this path.

...
UnhandledPromiseRejectionWarning: Error: Cannot find module '../external/npm/node_modules/next/dist/shared/lib/constants.js'

Also if you have your project in a path that case uppercase letters it will throw ../../../../../../../../../projects/next-test/node_modules/next/dist/shared/lib/side-effect.js There are multiple modules with names that only differ in casing. This can lead to unexpected behavior when compiling on a filesystem with other case-semantic. Use equal casing. Compare these module identifiers:

See vercel/next.js#10739

Moving the project to a different path is not a solution for me.

2. Linux sandboxed
   If next wants to change contents of tsconfig.json or next.env.d it throws an error.

> Build error occurred
[Error: EROFS: read-only file system, open '/home/xnerhu/.cache/bazel/_bazel/3cf0418ee085a
291cd39f570dedeae15/sandbox/linux-sandbox/38/execroot/init/bazel-out/k8-fastbuild/bin/frontend/app/tsconfig.json'] {
  errno: -30,
  code: 'EROFS',
  syscall: 'open',
  path: '/home/xnerhu/.cache/bazel/_bazel/3cf0418ee085a2
91cd39f570dedeae15/sandbox/linux-sandbox/38/execroot/init/bazel-out/k8-fastbuild/bin/frontend/app/tsconfig.json'
}
info  - Checking validity of types...
Target //frontend/app:next_build failed to build

3. I'm concerned that .next folder, which is a cache would be included when building a container image.

I'm really confused how to implement it all the best way so I'm looking forward to work with someone. I know that @flolu @duarten have experience.

[tcarrio]

So our team did some work with Bazel and Next.js, and we submitted a patch upstream that allowed us to use Next.js within the Linux sandbox.

A large issue was that read-only files were interpreted as failure scenarios and would break (as you have noted above), which was fixed in this vercel/next.js#30758.

I would also be interested in an official example of Next.js- especially if it could be an official smoke test for rules_nodejs updates since we have had things break.

I will see what kind of project I could throw together for this.

[tcarrio]

As a short follow-up, the local dev server has been failing for us since our update from 4.0.0 to 4.2.0

Once we've patched and submitted the fix upstream we can submit an example of Next.

It would similarly be nice to have some kind of integration test for Next since it's a fairly popular project. At least the decision can be made with the knowledge of breaking compatibility, and maintaining an example of a Next Bazel project would be more straightforward.

[alexeagle]

I guess the Turborepo acquisition by Vercel has some bearing here, that there's some other monorepo tooling which next.js will presumably give direct support for. I'd also love for Bazel+Next.js to have a good example, SGTM to add one here.

[Zemnmez]

Would really love to see next.js with Bazel. Are there any working examples in the meantime?

[flolu]

@Zemnmez I have tried it here, but there are still issues. And my solution isn't an incremental build. It's far from perfect.

[alexeagle]

#3297 is adding this

[github-actions]

This issue has been automatically marked as stale because it has not had any activity for 6 months. It will be closed if no further activity occurs in 30 days. Collaborators can add a "cleanup" or "need: discussion" label to keep it open indefinitely. Thanks for your contributions to rules_nodejs!

[github-actions]

This issue was automatically closed because it went 30 days without any activity since it was labeled "Can Close?"