feat(nextjs): Add package for nextjs plugin #85
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Motivation
Using WyW (Linaria) with Next.js, in the absence of official integration, has been a big pain so far. People have been relying on
next-linaria
(not maintained anymore) ornext-with-linaria
(has it's own issue of not being able to write global and local css in the same file). Mainly the issue is that these are not official. This change opens the way to having an official plugin that others can also contribute to and fix issues (whenever found).Summary
webpack-loader
package that specifically handles nextjs integration. The support for virtual modules is not the best when it comes to Next.js. That's why, the currentwebpack-loader
package does not work directly with Next. There is also an issue with custom css loader that gets removed during one of the three phases of Next.js build process. This change allows thenextjs
plugin package to then hook into the usual webpack loader process.@wyw-in-js/nextjs
package. It handles stuff like adding the two loaders (the webpack loader and the css injector loader) to the existing webpack configuration. It also handles resolving some of the next.js modules that are part of it's compile time likenext/image
ornext/font
.examples
directory that uses@linaria/core
with the@wyw-in-js/nextjs
plugin integration.What this PR does not cover is support for Turbopack which has some key APIs missing as of now for us to support it.
Test plan
Since it'll be hard to test the Next.js plugin itself, I was planning on using the
nextjs-demo
app as the testing playground by adding various combinations of the@linaria/core
or@linaria/react
usage and try to build the app.There is an issue right now in the new package that only allows apps with ESM files, ie, you can have
next.config.mjs
ornext.config.js
with"type": "module"
in package.json. Commonjs doesn't work. This is something that I am debugging and will make the PR ready to review once that is done.This code has been extracted out of Pigment CSS's Next.js implementation for the community.
To test the Next.js integration, go into the
examples/nextjs-demo
app and runpnpm build
to build the app.The review can be done commit-wise since each commit builds on top of the previous one.