https://github.com/javascripter/nextjs-react-strict-dom-demo
Demonstration of how to configure Next.js with react-strict-dom using postcss-react-strict-dom using official preset
https://github.com/javascripter/nextjs-react-strict-dom-demo
Last synced: 8 months ago
JSON representation
Demonstration of how to configure Next.js with react-strict-dom using postcss-react-strict-dom using official preset
- Host: GitHub
- URL: https://github.com/javascripter/nextjs-react-strict-dom-demo
- Owner: javascripter
- License: mit
- Created: 2024-11-22T18:26:12.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-11-22T20:07:24.000Z (12 months ago)
- Last Synced: 2025-01-25T17:32:45.538Z (10 months ago)
- Language: TypeScript
- Homepage:
- Size: 119 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Next.js + postcss-react-strict-dom Demo
## What
This is a demo of how to extract StyleX CSS for Next.js using postcss-react-strict-dom.
> This is a continuation of StyleX CSS extraction method used for [React-Strict-DOM's official Expo Web examples](https://github.com/facebook/react-strict-dom) using [postcss-react-strict-dom](https://github.com/javascripter/postcss-react-strict-dom), but **for Next.js 15 and App Dir**.
See related issues and PRs for context:
- https://github.com/facebook/react-strict-dom/issues/236
- https://github.com/facebook/react-strict-dom/issues/34
- https://github.com/facebook/react-strict-dom/pull/239
## How
### 1. Install dependencies
Install required dependencies:
```bash
bun add react-strict-dom
bun add --save-dev postcss-react-strict-dom autoprefixer
```
Install `@stylexjs/babel-plugin` explicitly (not sure this is a upstream bug but this dependency is required for running).
```bash
bun add --save-dev @stylexjs/babel-plugin@0.7.5
```
### 2. Apply patches
This repository tries to run the official example from RSD as closely as possible.
Please see `package.json` and `patches/` dir for more details:
1. Patch for "react-strict-dom@0.0.29" is applied to apply latest upstream changes not published yet on npm.
1. Patches borrowed from RSD (@stylexjs/stylex@0.7.5" and "@stylexjs/babel-plugin@0.7.5") are applied to render some official examples correctly.
### 3. Configure PostCSS Plugin for Next.js
Please see `next.config.ts`, `babel.config.js`, and `postcss.config.js` for correct configuration for Next.js.
### 4.Run
In development:
```bash
bun run dev
```
In production:
```bash
bun run build && bun run start
```
1. `/` renders the official example (copied and lightly-modified for Next.js)
2. `/server-action-demo` is a test page to confirm Server Actions still work correctly