Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/developit/nextjs-preact-demo
Next.js 9.3 + Preact = 21kB
https://github.com/developit/nextjs-preact-demo
Last synced: 29 days ago
JSON representation
Next.js 9.3 + Preact = 21kB
- Host: GitHub
- URL: https://github.com/developit/nextjs-preact-demo
- Owner: developit
- Created: 2020-02-02T17:32:10.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-11-02T07:55:38.000Z (about 4 years ago)
- Last Synced: 2024-10-31T00:00:19.686Z (about 1 month ago)
- Language: JavaScript
- Homepage: https://nextjs-preact.now.sh
- Size: 718 KB
- Stars: 384
- Watchers: 13
- Forks: 25
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-list - nextjs-preact-demo
- Awesome-NextJs - nextjs-preact-demo - [website](https://nextjs-preact.now.sh/) (Nextjs Projects)
README
# Preact example
This is a fully working example of Next.js 9.5 running on [Preact](https://github.com/preactjs/preact) instead of React.
This reduces the base JavaScript weight of pages to ~22kB.
> 🔠In the future, this can be even smaller with some additional Webpack optimizations.
## How to use
Clone this repo and run `npm install`:
```sh
git clone https://github.com/developit/nextjs-preact-demo.git
cd nextjs-preact-demo
npm install
```
There are three commands available:
```sh
# start a development server:
npm run dev
# create a production build:
npm run build
# start a production server:
npm start
```
## How does it work?
The example takes advantage of npm/yarn aliases, which essentially allow installing `preact/compat` at `node_modules/react`.
Here's how this example repo was set up:
- Set up a basic Next.js app using `create-next-app`
- Install `preact`, uninstall `react` and `react-dom`.
- Install [preact-compat/react](https://github.com/preact-compat/react) and [preact-compat/react-dom](https://github.com/preact-compat/react-dom) for aliasing.
- Use an [npm alias](https://github.com/npm/rfcs/blob/latest/implemented/0001-package-aliases.md#detailed-explanation) to replace `react-ssr-prepass` with `preact-ssr-prepass` (also [works](https://twitter.com/sebmck/status/873958247304232961) with Yarn).