Free self-hosted web vitals with Next.js, Vercel and PlanetScale.
Install prisma dependencies:
npm install @prisma/client
npm i -D prisma
Add prisma postinstall script in the packcage.json file:
"scripts": {
...
"postinstall": "prisma generate"
},
Having my own self-hosted web analytics with Umami, PlanetScale, Prisma and Vercel, is helping me compose a whole picture of my website's web analytics, without platform bias, with a simple and privacy focused solution, and free of charge. Additionally, because I am interested in the technical side, it has been a good opportunity to interact with SQL database alternatives like PlanetScale, Node.js ORM like Prisma, and deployments to Vercel. This guide covers how I adapted the Umami’s installation process to work with PlanetScale.
Keep your user's privacy at the center of your practices as established by GDPR and California law. Set ad_storage='denied', analytics_storage='denied', gtag('set', 'ads_data_redaction', true) and 'anonymize_ip': true for less intrusion while enjoy the great features of the new Google Analytics 4 in your Next.js web app.
Update the AWS Route 53 domain’s nameservers or, A and CNAME record types with the values provided by Vercel under ProjectName / Settings / Domains after you added a domain to the project. It will show the info needed to configure greatdomain.com and redirect to www.greatdomain.com or vice versa. After you tried to add the domain to your project unsuccessfully that information will also be sent to your email explaining what to do. Vercel allows you to configure A (recommended) and CNAME records.