Forem: Trinc4

How I Built a Blazing-Fast SEO Website for My Brand Registration Business (Without Being a Developer)

Trinc4 — Tue, 03 Feb 2026 08:49:22 +0000

Let’s be honest: when you’re an entrepreneur focused on a service like trademark registration, the last thing you want to spend months on is building a website from scratch. You need an online presence that works for you 24/7, generating leads and establishing authority. But hiring a dev agency can be expensive, and drag-and-drop builders often feel limiting and slow.

I was in this exact spot with my new venture, TC Connect Marcas. I needed a site that was fast, professional, and most importantly, discoverable. I needed strong SEO from day one, especially for hundreds of service-specific keywords (think "register trademark in Brazil," "brand protection São Paulo," etc.).

The solution? Combining modern development frameworks with a programmatic SEO approach, all orchestrated through low-code platforms. Here’s my stack and thought process.

The Core Stack: Power Without the Deep Code

I’m not a professional developer, but I understand enough to navigate tools. My choices were deliberate:

Next.js & React.js: I knew I needed a React-based framework for flexibility and interactivity. Next.js was the obvious choice for its built-in SEO advantages (like server-side rendering and static generation) and incredible performance.
Vercel: The seamless deployment from Git. Push code, and it’s live globally in seconds. The performance and analytics are top-notch.
Low-Code/Visual Development Platforms (like VibeCode): This was my "translator." Using a visual platform that generates clean Next.js/React code allowed me to design and structure the core pages (Home, About, Services) visually, without writing every single line of JSX. It abstracted the complexity but didn’t lock me into a proprietary system.
The Game Changer: Programmatic SEO for Content at Scale

The real magic for my business was automating content creation. A trademark registration business isn't just one service; it's a suite of answers to hundreds of related questions.

The Data Foundation: I started with a simple spreadsheet. One column for target keywords (e.g., "how to register a trademark," "trademark search class 25," "cost of intellectual property registration"). Associated columns for city names, service variations, and common questions.
Template Creation: In my codebase (structured by the visual tool), I created a dynamic page template ([slug].js). This template defined the layout: a clear H1, structured data markup, informative sections explaining the process, benefits, and a clear CTA.
Pre-compiling at Build Time: This is where Next.js shines. Using getStaticPaths, I made Next.js pre-generate a static HTML page for every single one of my target keyword combinations at build time. For my initial launch, this meant generating hundreds of pages instantly.

Result: Lightning-fast load times (Google loves this).
Result: Perfectly structured, unique content for highly specific long-tail queries.
Result: A scalable content architecture. Adding a new city or a new question type is just a data entry task.
Why This Approach Wins for Service Businesses

Performance: Pages load instantly because they're pre-rendered static files served from a global CDN (Vercel's Edge Network). This directly impacts user experience and search rankings.
SEO Control: I have full control over meta tags, structured data (crucial for local business and FAQ rich results), headings, and URL structure. No plugin conflicts, no bloat.
Scalability: My "blog" or content hub is actually this programmatically generated section. Need to target a new region? Update the data source and rebuild. It’s marketing agility powered by code.
Maintainability: The core site layout is built with reusable React components. Updating the navigation or footer once updates it across all hundreds of pages.
Final Architecture & Results

The final site, TC Connect Marcas, has:

A visually designed, performant core website for brand trust.
A vast, programmatically generated section targeting the entire funnel—from top-of-funnel questions to commercial intent keywords.
A tech stack that ensures maintainability and performance without requiring me to be a full-stack expert.
The site indexed remarkably quickly, thanks to the clean, static HTML and a sitemap generated during the build. It’s a powerful lead generation engine that works silently in the background.

You Can Do It Too

If you have a service-based business with predictable search patterns (lawyers, consultants, agencies, local services), this model is a powerhouse. You don't need to be a senior dev. You need to understand the concepts, leverage the right modern tools (visual dev + Next.js + Vercel), and focus on structuring your data strategically.

The blend of visual development for the core site and programmatic SEO for content at scale is, in my opinion, the future for savvy non-technical founders.

Have you tried a similar approach with programmatic SEO or low-code tools for Next.js? I’d love to hear about your stack in the comments!

Built with ❤️ using Next.js, React, Vercel, and visual development tools. The site is live at www.tcconnectmarcas.com.br

How I Built a Global SaaS with Next.js 14 and Achieved a 100% Lighthouse Score

Trinc4 — Thu, 01 Jan 2026 11:27:46 +0000

Pivoting a product is never easy. I recently took the challenge of transforming a localized legacy concept into a global SaaS product targeted at the US market. The result is Culinary Converters, a precision baking tool powered by density data.

But as a developer, my main goal wasn't just "shipping features." It was shipping perfection. I wanted to see all green circles in Google Lighthouse: Performance, Accessibility, Best Practices, and SEO.

Here is how I used Next.js 14 (App Router), Tailwind CSS, and Vercel to hit that elusive 100/100 score across the board.

1. The "Cup Problem" (The Why)

Before talking code, we need to talk physics. In the US, bakers use "Cups" for measurement. The problem? A cup of flour can weigh anywhere from 120g to 150g depending on how compressed it is.

I needed a database that understood Density ($g/ml$).

I open-sourced the documentation on this logic here:
👉 The Precision Baking Database (GitHub)

2. The Stack for Speed

To go global, latency matters. I chose:

Next.js 14: For Server-Side Rendering (SSR) and dynamic metadata generation.
Tailwind CSS: For zero-runtime overhead styles.
Vercel: For Edge Network distribution.

This stack allowed the First Contentful Paint (FCP) to stay under 0.8s, even on 4G networks.

3. The Accessibility Challenge (The Hardest 10%)

Getting to 90% accessibility is easy. Getting to 100% is a war of attrition.

Google Lighthouse is ruthless. It flagged issues I didn't even think about, like the contrast ratio of my gray text (text-slate-400) on white backgrounds.

The Fix:
I had to audit every single color. We moved to text-slate-500 for standard text to ensure a contrast ratio above 4.5:1.

Another major hurdle was the calculator inputs. Screen readers need to know exactly what an input does.

tsx
// Before (Fails Accessibility)
<input type="number" placeholder="Amount" />

// After (100% Score)
<input 
  type="number" 
  id="amount" 
  aria-label="Enter amount to convert"
  placeholder="Amount" 
  className="placeholder:text-slate-500 focus:ring-2 focus:ring-slate-500"
/>

Small changes, huge impact.

International SEO Strategy Since the goal is global traffic, I couldn't rely on static meta tags. I implemented dynamic metadata generation for every ingredient page.

If you search for "All-Purpose Flour density", the page title dynamically reflects exactly what the user is looking for, generated at request time.

The Result The site is now live and serving users globally. It was a journey of obsessing over every pixel and every byte, but seeing those four "100" circles is worth it.

Check out the live performance demo here: 🚀 Live Demo: Culinary Converters

If you are building a SaaS, don't ignore Accessibility. It’s not just for users with disabilities; it’s a direct ranking signal for Google.

Happy coding (and baking)!

How I built a pSEO app with Next.js 14 generating 500+ static pages (Case Study)

Trinc4 — Mon, 29 Dec 2025 01:51:43 +0000

Hello devs! 👋

I wanted to share a weekend project I just deployed to test the limits of Next.js 14 (App Router) and Static Site Generation (SSG).

The challenge was to build a Brazilian Labor Calculator (Rescisão Fácil) that is "future-proof", implementing tax rules projected for 2026 (specifically the new Income Tax exemption up to R$ 5k).

🛠 The Stack

Framework: Next.js 14 (App Router)
Styling: Tailwind CSS + Shadcn/UI (focused on Mobile Performance)
Architecture: Programmatic SEO (pSEO)
Deploy: Vercel

⚡ Performance & pSEO

Instead of a generic calculator, I used generateStaticParams to pre-render over 500 unique pages for specific job titles (based on the official Brazilian Occupation Classification - CBO).

I also implemented content-visibility: auto CSS property to handle large DOM lists (400+ links), achieving a 98+ Performance Score on Mobile (PageSpeed Insights).

🚀 Live Demo

You can check the live performance and the 2026 tax logic here:
👉 https://www.rescisaofacil.com.br

I also created a public repository documenting the architecture:
GitHub Docs Repo

Feedback on the UX/Performance is welcome!