/nextjs-vanilla-extract-example

Primary LanguageTypeScriptMIT LicenseMIT

nextjs-vanilla-extract-example

This is an example Next.js project using 🧁 vanilla-extract. via the official Next.js plugin.

Setup: yarn

Local development: yarn dev

Production preview: yarn build && yarn start

Notable changes I made to the basic Next.js example:

  • Switched to Yarn.
  • Switched to TypeScript.
  • Installed deps with yarn add --dev @vanilla-extract/next-plugin @vanilla-extract/babel-plugin @vanilla-extract/css.
  • Added a next.config.js using @vanilla-extract/next-plugin.
  • Added a .babelrc using @vanilla-extract/babel-plugin.
  • Introduced a components folder and added a HelloWorld component with a matching HelloWorld.css.ts file, then rendered it on the index page.
  • Added a browserslist field to package.json.

This repo was originally based on work found in the vanilla-extract GitHub discussion "Usage with Nextjs", which then turned into the official Next.js plugin. Thanks to the community for helping out on this 🙏