Building a Privacy-Conscious Website with Next.js
I built a services website with Next.js and MUI to showcase my web development and privacy compliance services.
The project also gave me an opportunity to combine frontend development with privacy-conscious analytics and consent management.
Building the UI with MUI
One of the larger changes I made during development was moving away from my previous TypeScript-based implementation and rebuilding the application's UI around MUI.
MUI provided a consistent foundation for the site's design, including typography, spacing, buttons, cards, and responsive layouts.
I also built reusable components for services, FAQs, legal content, and other sections of the site, making it easier to maintain a consistent experience as the application grew.
Privacy & Consent
Because the site focuses on privacy compliance, I wanted privacy to be part of the implementation itself.
I integrated a cookie consent manager through Google Tag Manager (GTM), allowing visitors to control whether optional tracking technologies are enabled.
On the application side, I check for the appropriate consent before initializing PostHog. This prevents analytics from running when the visitor has not provided the necessary consent.
The site also includes dedicated Privacy Policy and Terms of Service pages.
What I Learned
This project gave me practical experience balancing frontend architecture, privacy, and analytics.
Moving the UI to MUI gave me experience working with a component library and creating a consistent design system, while implementing consent-aware analytics showed me how privacy requirements can influence application behavior.
It also reinforced that analytics isn't simply about collecting as much data as possible. The application needs to consider consent and focus on collecting information that is actually useful.
Technologies: Next.js · React · MUI · PostHog · Google Tag Manager · Consent Management
