This is a Next.js tools website with browser-first utilities for image, text, developer, and SEO workflows.

Documentation

• Analytics event model: docs/analytics.md

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying files in src/app and src/components. The page auto-updates as you edit the project.

Environment Variables

Create a local env file by copying .env.example to .env.local.

cp .env.example .env.local

For Vercel, use the same variable names from .env.example in: Project Settings → Environment Variables

Important:

• NEXT_PUBLIC_SITE_URL, NEXT_PUBLIC_CONTACT_EMAIL, and NEXT_PUBLIC_ADMIN_EMAIL are public environment variables used in the frontend.
• Provider URLs and identifiers shown below are examples. Configure real values in Vercel before enabling those integrations.

These public variables are supported by the current app:

NEXT_PUBLIC_SITE_URL=https://www.webutilia.com
NEXT_PUBLIC_CONTACT_EMAIL=clickproqa@gmail.com
NEXT_PUBLIC_ADMIN_EMAIL=clickproqa@gmail.com
NEXT_PUBLIC_NEWSLETTER_PROVIDER=beehiiv
NEXT_PUBLIC_NEWSLETTER_URL=https://your-newsletter-provider.example/subscribe
NEXT_PUBLIC_NEWSLETTER_METHOD=post
NEXT_PUBLIC_NEWSLETTER_EMAIL_FIELD=email
NEXT_PUBLIC_NEWSLETTER_SOURCE_FIELD=source
NEXT_PUBLIC_NEWSLETTER_TARGET=_blank
NEXT_PUBLIC_NEWSLETTER_HIDDEN_FIELDS='{"publication_id":"pub_123"}'
NEXT_PUBLIC_WAITLIST_PROVIDER=convertkit
NEXT_PUBLIC_WAITLIST_URL=https://your-waitlist-provider.example/join
NEXT_PUBLIC_WAITLIST_METHOD=post
NEXT_PUBLIC_WAITLIST_EMAIL_FIELD=email_address
NEXT_PUBLIC_WAITLIST_SOURCE_FIELD=source
NEXT_PUBLIC_WAITLIST_TARGET=_blank
NEXT_PUBLIC_WAITLIST_HIDDEN_FIELDS='{"form":"waitlist"}'
NEXT_PUBLIC_SHOW_AD_SLOTS=true
NEXT_PUBLIC_SHOW_SPONSORED_BLOCKS=true
NEXT_PUBLIC_SHOW_NEWSLETTER_SIGNUP=true
NEXT_PUBLIC_SHOW_WAITLIST_BLOCK=true

If NEXT_PUBLIC_NEWSLETTER_URL or NEXT_PUBLIC_WAITLIST_URL are not set, the UI falls back to email-based manual handling. Set any of the NEXT_PUBLIC_SHOW_* flags to true only when you intentionally want those modules visible.

Provider notes:

• Supported provider presets are generic, beehiiv, convertkit, and mailchimp
• You can override provider defaults with *_EMAIL_FIELD, *_SOURCE_FIELD, and *_HIDDEN_FIELDS
• *_HIDDEN_FIELDS must be valid JSON for extra embedded-form fields

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.