├── .gitignore
├── pages
    ├── about.js
    └── index.js
├── next.config.js
├── package.json
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | /.next
2 | /build
3 | node_modules
4 | 


--------------------------------------------------------------------------------
/pages/about.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | const About = () => (
 4 |   <main>
 5 |     <h1>About us</h1>
 6 |   </main>
 7 | );
 8 | 
 9 | export default About;
10 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | const withPrefresh = require('@prefresh/next');
 2 | const preact = require('preact');
 3 | const withPreact = require('next-plugin-preact');
 4 | 
 5 | module.exports = withPreact({
 6 |   experimental: {
 7 |     modern: true,
 8 |   },
 9 | });
10 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Link from 'next/link'
 3 | 
 4 | const Home = () => {
 5 |   const [state, setState] = React.useState(0)
 6 |   return (
 7 |     <main>
 8 |       <h1>Hello from Preact</h1>
 9 |       <p>{state}</p>
10 |       <button onClick={() => setState(state + 1)}>Increment</button>
11 |       <Link href="/about">
12 |         <a>About</a>
13 |       </Link>
14 |     </main>
15 |   )
16 | }
17 | 
18 | export default Home;
19 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nextjs-preact-demo",
 3 |   "version": "1.0.0",
 4 |   "scripts": {
 5 |     "dev": "cross-env NODE_ENV=development next",
 6 |     "build:ssg": "cross-env NODE_ENV=production next build && next export -o build",
 7 |     "build:ssr": "cross-env NODE_ENV=production next build",
 8 |     "start": "cross-env NODE_ENV=production next start"
 9 |   },
10 |   "devDependencies": {
11 |     "cross-env": "^7.0.2"
12 |   },
13 |   "dependencies": {
14 |     "next": "10.0.0",
15 |     "next-plugin-preact": "^3.0.3",
16 |     "preact": "^10.5.5",
17 |     "preact-render-to-string": "^5.1.11",
18 |     "react": "npm:@preact/compat@0.0.3",
19 |     "react-dom": "npm:@preact/compat@0.0.3",
20 |     "react-ssr-prepass": "npm:preact-ssr-prepass@^1.1.2"
21 |   },
22 |   "license": "UNLICENSED"
23 | }
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Preact example
 2 | 
 3 | This is a fully working example of Next.js 9.5 running on [Preact](https://github.com/preactjs/preact) instead of React.
 4 | 
 5 | This reduces the base JavaScript weight of pages to ~22kB.
 6 | 
 7 | > 🔭 In the future, this can be even smaller with some additional Webpack optimizations.
 8 | 
 9 | ## How to use
10 | 
11 | Clone this repo and run `npm install`:
12 | 
13 | ```sh
14 | git clone https://github.com/developit/nextjs-preact-demo.git
15 | cd nextjs-preact-demo
16 | npm install
17 | ```
18 | 
19 | There are three commands available:
20 | 
21 | ```sh
22 | # start a development server:
23 | npm run dev
24 | 
25 | # create a production build:
26 | npm run build
27 | 
28 | # start a production server:
29 | npm start
30 | ```
31 | 
32 | ## How does it work?
33 | 
34 | The example takes advantage of npm/yarn aliases, which essentially allow installing `preact/compat` at `node_modules/react`.
35 | 
36 | Here's how this example repo was set up:
37 | 
38 | - Set up a basic Next.js app using `create-next-app`
39 | - Install `preact`, uninstall `react` and `react-dom`.
40 | - Install [preact-compat/react](https://github.com/preact-compat/react) and [preact-compat/react-dom](https://github.com/preact-compat/react-dom) for aliasing.
41 | - 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).
42 | 


--------------------------------------------------------------------------------