Preact example
This is a fully working example of Next.js 10.0 running on 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
:
git clone https://github.com/developit/nextjs-preact-demo.git
cd nextjs-preact-demo
npm install
There are three commands available:
# 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
, uninstallreact
andreact-dom
. - Install preact-compat/react and preact-compat/react-dom for aliasing.
- Use an npm alias to replace
react-ssr-prepass
withpreact-ssr-prepass
(also works with Yarn).
CI / Automated Testing / code quality
Github Action
Lighthouse
- https://github.com/OskarAhl/Lighthouse-github-action-comment
- https://github.com/treosh/lighthouse-ci-action
- https://github.com/GoogleChrome/lighthouse-ci
Bundle Analyzer
Compressed Size
BundleWatch
BundleStats
LGTM
Renovate
Next.js Stats Action
Prettier - Standard
auto create pull requests
detect secrets
release notes preview
add labels to pull requests automatically
OWASP
- https://github.com/marketplace/actions/owasp-zap-full-scan
- https://www.zaproxy.org/blog/2020-05-15-dynamic-application-security-testing-with-zap-and-github-actions/
- https://github.com/DFE-Digital/get-teacher-training-adviser-service/tree/b1697f15fb72e17cddaf1da50664e3dd30d3011d
- https://github.com/kmorisoto/owasp-test-webapp/blob/daba4964cf3f6c02061087d3f34ec0d3e9fe18e5/.github/workflows/zap_full.yml (set ip address)
under consideration
- https://github.com/hattan/verify-linked-issue-action
- https://github.com/marketplace/actions/clean-commit
- https://github.com/marketplace/actions/merge-me
- https://github.com/marketplace/actions/npm-audit-pr
- https://github.com/marketplace/actions/create-a-release
- https://github.com/marketplace/actions/milestone-closer
- https://github.com/marketplace/actions/wakatime-stat-update-action
- https://github.com/DevopsHackathonDemo/DevOps-demo/tree/ae1954831e2f7821ff2d0742377bf906d0f0adef