- A PWA Next/Tailwind template app with card component and perfect Lighthouse score
- Note: to open web links in a new window use: ctrl+click on link
- 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. Every component file in the pages folder is treated as a page
- Tailwind CSS added to Next.js as part of Next.js example app
Just-in-Time Modeused for Tailwind CSS.- Progressive Web App (PWA) enabled. Latest Next v11 used includes server code and makes adding PWA much easier
- Custom Document
pages/_documentused to add to app's and tags - Next.js State Management NotesContext: note data is passed from provider to consumer, avoids props drilling from React passing data from top to bottom
- Nextjs useEffect Hook is like componentDidMount, componentDidUpdate, and componentWillUnmount combined. They don't run during Server Side Rendering (SSR). UseEffect runs after rendering
- React v17 Javascript library.
- React icons v4, full list here
- Next v11 minimalist framework for rendering react apps on the server.
- Tailwind v2 utility-first CSS framework
- PostCSS v8 tool for transforming CSS with JavaScript
- 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 devruns the app in the development mode. Open http://localhost:3000 to view it in the browser.npm run buildbuilds the app for production to thebuildfolder. 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 startto run the built app.
pages/_documentHTML render used to add custom HTML to existing Next document page
render() {
return (
<Html lang="en">
<Head>
<meta
name="description"
content="Build a Next.js PWA with 100% lighthouse score"
></meta>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<meta name="theme-color" content="#0D47A1" />
<link rel="manifest" href="/manifest.json" />
<link
href="/favicon-16x16.png"
rel="icon"
type="image/png"
sizes="16x16"
/>
<link
href="/favicon-32x32.png"
rel="icon"
type="image/png"
sizes="32x32"
/>
<link rel="apple-touch-icon" href="/apple-icon.png"></link>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}- Status: Working CRUD app but needs work. All data lost upon refresh. Deployed to Netlify
- To-Do: Replace create & edit page styling. Add nav with about & contact links. Add card component, add about & contact cards
- Install Tailwind CSS with Next.js
- Tailwind CSS: Customizing Colors
- Next.js example app
- Not Science Lab: Product Card Tutorial (Next.js, Tailwind CSS and react-icons)
- Convert your website into a PWA in 8 simple steps
- How to Deploy Next.js Sites to Netlify
- codewith hugo: Why doesn't React.useEffect run on React server-side renders (SSR)?
- hasinhayder/tailwind-cards
- N/A
- Repo created by ABateman, email: gomezbateman@yahoo.com