Next Tailwind Optimised

📋 A Next app using Tailwind styles and optimised Lighthouse score

:zap: Next Tailwind Optimised

A Next/Tailwind SSR app that displays data & images from an API with perfect Lighthouse scores
This is a template for a portfolio website (Work in progress)
Note: to open web links in a new window use: ctrl+click on link

GitHub repo size GitHub pull requests GitHub Repo stars GitHub last commit

Next.js used for frontend is for server-rendered react apps. It has automatic code splitting, simple page-based routing, built-in CSS support and hot reloading.
Tailwind CSS added to Next.js
Latest Next/Image optimisation used so image downloaded as Webp format and automatically sized. This is a major advantage over non-optimised Images. Working for datalist page but not used for News API page as all sources have to be added to next.config.js
Converted to Progressive Web App (PWA).
Custom Document file ./pages/_document.js created to override and extend default Document. It injects meta tags into every page

Example screenshot

React v17 Javascript library.
React icons v4
Next v12 minimalist framework for rendering react apps on the server.
Tailwind CSS v3 utility-first CSS framework
PostCSS v8 tool for transforming CSS with JavaScript
Vercel site hosting
pngTree downloadable images, png etc.
pwa-asset-generator v4 Automated PWA asset generation and image declaration. Creates icons and JSON array for PWA manifest.json file

npm run dev runs the app in the development mode. Open http://localhost:3000 to view it in the browser.
npm run build builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes.
npm run start to run the built app.