feat: migrate with-linaria example to next-with-linaria for Next.js 13 support

[dlehmhus]

Bug

• Related issues linked using fixes #number
• Integration tests added
• Errors have a helpful link attached, see contributing.md

Feature

• Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
• Related issues linked using fixes #number
• e2e tests added
• Documentation added
• Telemetry added. In case of a feature if it's used or not.
• Errors have a helpful link attached, see contributing.md

Documentation / Examples

• Make sure the linting passes by running pnpm build && pnpm lint
• The "examples guidelines" are followed from our contributing doc

This PR updates the with-linaria template to use next-with-linaria instead of next-linaria for Next.js 13 support. Furthermore, this PR migrates the example to typescript and replaces the minimal example with the default Next.js starter template (Linaria edition).

[juanferreras]

many, many thanks for your work @dlehmhus! It's great to see React Server Components compatible with (zero-runtime) CSS-in-JS.

I'd love to hear from any Next.js maintainers whether the current incompatibilities on the app-dir (beta) with webpack-inline-loaders are temporary (and we could still support @linaria through the native @linaria/webpack5-loader), or whether refactoring to use webpack-virtual-modules must be a necessary change.

Related issue on style9 SukkaW/style9-webpack#1

[SukkaW]

or whether refactoring to use webpack-virtual-modules must be a necessary change.

@juanferreras FYI, Next.js 13 appDir doesn't support webpack-virtual-modules, and that's why I fallback to using the virtual-file-loader approach in my style9-webpack plugin. Here I quote from README of style9-webpack:

However, webpack-virtual-modules doesn't work well with Next.js. Next.js launches multiple webpack compiler instances to compile its server-side and client-side code separately. And webpack-virtual-modules just doesn't work when it is being shared between multiple webpack compiler instances.

On the other hand, I do have a temporary workaround for the missing loader inline query issue:

SukkaW/style9-webpack@f468bf8...696f4e0

[dlehmhus]

@SukkaW you actually can use webpack-virtual-modules with Next.js 13, but you have to create a new instance of webpack-virtual-modules for every webpack instances that Next.js launches and then keep them in sync. That is basically how next-with-linaria works. (It is definitely hacky, but it works)
When I got some free time, I will take a look at your approach on how you worked around that multi-instance issue 🕵️

[leerob]

Could this please be updated to latest Next.js with stable App Router?

[leerob]

Given this is a few months old, I'm going to close this out – but would happily review a new PR (please link back here) if you are open to fixing up this example for the stable App Router (a few changes needed here).

Thank you!