Feature add preact

README.md

@@ -39,7 +39,22 @@ If you don't feel comfortable using **TypeScript** or simply don't need it, just
 
 ### 1.2 Preact
 
-I'm planning to switch out **React** with [Preact](https://preactjs.com/) to make this template even lighter and leaner.
+This template runs with [Preact](https://preactjs.com/) instead of **React**, which results in a smaller build and the same developer experience. [More info about the differences to React](https://preactjs.com/guide/v8/differences-to-react/). Want to switch back to **React**? Easy as cake, just delete or comment out the following in `next.config.js`:
+
+```javascript
+webpack: (config, { dev, isServer }) => {
+    if (!dev && !isServer) {
+      Object.assign(config.resolve.alias, {
+        react: 'preact/compat',
+        'react-dom/test-utils': 'preact/test-utils',
+        'react-dom': 'preact/compat',
+      });
+    }
+    return config;
+  },
+```
+
+If you want to clean up your project, run `npm uninstall preact preact-compat` to uninstall it.
 
 ## 2. Performance 🏃‍♀️
 
@@ -117,7 +132,7 @@ I will do my best to keep this project up-to-date, especially the security heade
 
 ## To Do
 
-- [ ] Add favicon
-- [ ] Use Preact instead of React
+- [ ] Add favicon with background color
 - [ ] Add a preset for cookies
+- [x] Use Preact instead of React
 - [x] Create documentation

components/DeleteMe.tsx

@@ -145,9 +145,25 @@ export default function DeleteMe() {
           </p>
           <h3>1.2 Preact</h3>
           <p>
-            I'm planning to switch out React with{' '}
-            <ExtLink url="https://preactjs.com/" content="Preact" /> to make this template even
-            lighter and leaner.
+            This template runs with <ExtLink url="https://preactjs.com/" content="Preact" /> instead
+            of <strong>React</strong>, which results in a smaller build and the same developer
+            experience.{' '}
+            <ExtLink
+              url="https://preactjs.com/guide/v8/differences-to-react/"
+              content="More info about the differences to React."
+            />
+            Want to switch back to <strong>React</strong>? Easy as cake, just delete or comment out
+            the following in <code>next.config.js</code>:
+          </p>
+          <img
+            src="/code-2-min.png"
+            alt="Code in next.config.js for Preact"
+            width="1178"
+            height="744"
+          />
+          <p>
+            If you want to clean up your project, run{' '}
+            <code>npm uninstall preact preact-compat</code> to uninstall it.
           </p>
         </section>
         <hr />
@@ -169,7 +185,12 @@ export default function DeleteMe() {
             This template also ships with zero byte of client-side JavaScript, thanks to the
             following lines of code:
           </p>
-          <img src="/code-1.png" alt="Code snippet" width="1544" height="968" />
+          <img
+            src="/code-1-min.png"
+            alt="Code showing how to deactivate run time JavaScript in Next.js"
+            width="1544"
+            height="968"
+          />
           <p>
             If you want to use things like <strong>next/image</strong> or{' '}
             <strong>React hooks</strong> though, you will have to remove it, otherwise they will not

next.config.js

@@ -52,4 +52,16 @@ module.exports = {
     locales: ['en'],
     defaultLocale: 'en',
   },
+  // This will replace React with Preact only in client production build
+  // Delete or comment out if you're experiencing any issues with Preact
+  webpack: (config, { dev, isServer }) => {
+    if (!dev && !isServer) {
+      Object.assign(config.resolve.alias, {
+        react: 'preact/compat',
+        'react-dom/test-utils': 'preact/test-utils',
+        'react-dom': 'preact/compat',
+      });
+    }
+    return config;
+  },
 };

package.json

@@ -9,6 +9,8 @@
   },
   "dependencies": {
     "next": "10.0.7",
+    "preact": "^10.5.13",
+    "preact-compat": "^3.19.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "sass": "^1.32.8"

styles/delete-me.scss

@@ -30,7 +30,7 @@ body {
   }
 
   hr {
-    margin-top: 1.5rem;
+    margin: 3rem auto;
     width: 25%;
     border: 1px solid var(--font-color);
     -moz-transform: rotate(-1deg);
@@ -46,7 +46,7 @@ body {
 
   section,
   main {
-    max-width: 75rem;
+    max-width: 70rem;
     margin: 0 auto;
   }