- Start with basic.
- Page based routing
- Dynamic routing using slugs
- TailwindCSS, Markup language
- Start with package.json and manually install everything
{
"name": "next-reviews",
"private": true,
}
- npm packages to install
npm install next react react-dom
npm i gray-matter
npm -i marked
npm install -D tailwindcss @tailwindcss/typography postcss autoprefixer
npm install eslint eslint-config-next --save-dev
npm install qs
npm install @headlessui/react
npm install server-only
- Intializations
npx tailwindcss init -postcss
add scripts to package.json
npx prisma init --datasource-provider sqlite
- Home Page
- Reviews
- Review pages
- About
- Main menu
- Configure tailwind.config.js and globals.css
- Setup Header and Footer
- Styling and Fonts
- global.css
- Google fonts and configure font.js
- configure tailwind.config.js - content, theme and plugins
- Add className to html tag
- Reviews.js - Services to get data
- Headings - Pre-defined component
- ShareLink - Usefull utility - 'use client'
- Image component can be used for optimization. But cannot use static pages afterwards. Configure next.config.js
- Use NextJs Image component. Set fetch priority
npm install strapi to install strapi
npm run develop
npm run build
npm start
[email protected]
Admin123
- Dynamic params and dynamic rendering (force-dynamic)
- Page Not Found (notFound)
- Background revalidation and on-demand revalidation
-
npm install server-only
-
Make all calls server only
-
Caching of static pages is a problem. revalidatePath(next/cahce) will solve this problem
-
Progressive enhancement will even without javascript
-
Client-side validation html required and maxLength
- Create a model in schema.prisma
- npx prisma db push - Creates a database in the primsa folder
- Prisma client instances created over and over again. Create singleton