Nextjs Preact Demo

screenshot of Nextjs Preact Demo
nextjs
react

Next.js 9.3 + Preact = 21kB

Overview:

This is a product analysis of a fully working example of Next.js 9.5 running on Preact instead of React. The example aims to reduce the base JavaScript weight of pages to around 22kB, with the potential for even further reduction in the future through additional Webpack optimizations. The setup involves using npm/yarn aliases to install Preact in place of React, allowing for a lighter-weight application.

Features:

  • Runs on Preact: Fully functional example of Next.js 9.5 using Preact instead of React.
  • Reduces JS weight: Aimed at reducing the base JavaScript weight of pages to approximately 22kB.
  • Webpack Optimizations: Potential for further reduction in size through additional Webpack optimizations.
  • NPM/Yarn Aliases: Utilizes aliases to install Preact/compat at node_modules/react for more efficient setup.

Summary:

This product analysis showcases a working example of Next.js 9.5 using Preact instead of React, aiming to reduce the base JavaScript weight of pages. By leveraging npm/yarn aliases and utilizing Preact/compat, the setup offers a more lightweight alternative for web development. Further enhancements are possible through Webpack optimizations, making this example an efficient solution for building applications with reduced page weight.

nextjs
Next.js

Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components