NextJS On-Demand Incremental Static Regeneration (K8S & Ingress & Minikube), SonarQube and React Best Practices
On-demand ISR in Next.js
$ npm run build && npm start
Open Landing http://localhost:3000/ Open Detail http://localhost:3000/1 - http://localhost:3000/5000
$ node generateAllPages.js
You can find all static pages in .next/server/app..... And the response header has X-Nextjs-Cache: HIT
$ curl -X POST http://localhost:3000/api/webhook -H "Content-Type: application/json" -d '{"token": "token", "id": 222}'
- Structure the app in a certain way.
- Making things reusable.
- Ensure consistency throughout the app.
- Use Typescript !!
- Ensure the folder structure is easy to understand and consistent.
- Magic, hard-coded values should be extracted and placed into constants. (/lib/constants)
- Reusable UI components should be placed in the components folder.
- Do not add layout styles to reusable components.
- Reusable components should be as simple as possible.
- Use React Fragments to replace unnecessary div elements.
- Using useMemo, useCallback, and React.memo effectively can help optimize performance.
- Use the previous state in the update function when the new state depends on the previous state.
- Maintain a single source of truth. Avoid replicating the entire object for other purposes.
- Do not use useState to manage filters, variants (e.g., on an eCommerce product detail page), and pagination. Instead, use the URL to manage state.
- Use React Hooks library for data fetching. (Caching in Next.js, SWR, ReactQuery)
- Continuously improve the project by using components, custom hooks, utilities, and libraries.
$ docker build -t nextjs-on-demand-isr-nextjs .
$ docker image tag nextjs-on-demand-isr-nextjs:latest davischang/nextjs-on-demand-isr-nextjs:v1.1.3 && \
docker image tag nextjs-on-demand-isr-nextjs:latest davischang/nextjs-on-demand-isr-nextjs:latest
$ docker image push davischang/nextjs-on-demand-isr-nextjs:latest && \
docker image push davischang/nextjs-on-demand-isr-nextjs:v1.1.3
// start minikube
$ minikube start
// install nginx-ingress
$ helm repo add ingress-nginx https://kubernetes.github.io/ingress-nginx
$ helm repo update
$ helm install nginx-ingress ingress-nginx/ingress-nginx
$ minikube dashboard --url // dashboard
$ kubectl create namespace nextjsfront
$ helm install next-js-frontend ./deployment/helm -n nextjsfront
// get deployment info
$ kubectl get pods,service,deployment,ingress -n nextjsfront
$ kubectl get endpoints -n nextjsfront
Connect to LoadBalancer services
$ minikube tunnel
$ minikube service frontend-service -n nextjsfront
# update deployment change
$ helm upgrade next-js-frontend ./deployment/helm -n nextjsfront
# verify the deployment's rollout status
$ kubectl rollout status deployment/frontend-container -n nextjsfront
$ helm ls --all-namespaces -a
# find release name
$ helm list -n nextjsfront
# rollback deployment
$ helm rollback next-js-frontend -n nextjsfront
$ helm uninstall next-js-frontend -n nextjsfront
// stop and delete minikube
$ minikube stop && minikube delete
You can add ENV in runtime (server-side)
Not Include confidential data in your application code
$ kubectl get secrets -n nextjsfront
$ kubectl edit secret env-secret -n nextjsfront
# Find ENV: MY_SECRET_TOKEN: b3BhcXVlLWVudi1zZWNyZXQ=
$ echo "b3BhcXVlLWVudi1zZWNyZXQ=" | base64 -D