How I went from getting tired of explaining the same things to AI, to developing a cutting edge solution, to accidentally creating a brand

Diogo Abreu — Wed, 06 May 2026 09:00:00 +0000

There’s a moment every developer hits when “AI-assisted coding” starts feeling less like acceleration and more like friction.

For me, that moment came somewhere between deleting yet another useEffect-based data fetch and watching Cursor confidently generate a tailwind.config.js file in a project that absolutely did not need one.

That loop kept repeating:

Wrong patterns
Outdated APIs
Defaults that no longer reflect how modern apps are built

And the more cutting-edge the stack became—Next.js 16, React 19, Tailwind v4—the worse it got.

So I stopped fixing the symptoms and built my own rules pack instead.
Afterwards, I wanted to have some place that I could centralize it and future digital products and tools.

That place became Saastenance—and this post is both a technical deep dive and the story of how a small dev tool quietly turned into a full digital product and part of a brand.

The Real Problem: AI Is Only As Good As Its Defaults

Tools like Cursor and Claude Code don’t “understand” your stack—they pattern match based on training data.

And most of that data is already outdated.

So unless you explicitly constrain them, they will:

Reintroduce deprecated patterns
Ignore new framework primitives
Drift away from your architecture over time

What I needed wasn’t better prompts.

I needed persistent, enforceable rules.

Enter: The AI Rules Pack

The AI Rules Pack is a structured set of rules (in .mdc format) that:

Defines how your AI should think
Locks in modern best practices
Prevents regression into outdated patterns

It works with Cursor, Claude Code, and OpenAI Codex. It installs via a CLI where you choose your stack preferences.

But the interesting part—the reason it exists—comes from how Next.js 16 broke a lot of assumptions.

Let’s walk through that.

Breaking Changes in Next.js 16 (That AI Keeps Getting Wrong)

1. Data Fetching: `useEffect` Is No Longer the Default

❌ Before (what AI still generates)

'use client'

import { useEffect, useState } from 'react'

export default function Page() {
  const [data, setData] = useState(null)

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(setData)
  }, [])

  return <div>{JSON.stringify(data)}</div>
}

✅ After (Next.js 16 pattern)

export default async function Page() {
  const data = await fetch('https://api.example.com/data', {
    cache: 'no-store'
  }).then(res => res.json())

  return <div>{JSON.stringify(data)}</div>
}

Why this matters

Server Components are the default
Fetching happens on the server
No client waterfall, no loading flicker

Yet AI still defaults to client-side fetching unless told otherwise.

2. Server Actions Replace Client Mutation Logic

❌ Before

'use client'

async function handleSubmit(formData) {
  await fetch('/api/form', {
    method: 'POST',
    body: JSON.stringify(formData)
  })
}

✅ After

export async function submit(formData: FormData) {
  'use server'

  // direct DB call or mutation
}

<form action={submit}>
  <button type="submit">Submit</button>
</form>

Why this matters

No API route needed
No client fetch boilerplate
Stronger co-location of logic

AI often mixes both patterns—which creates unnecessary complexity.

3. `middleware.ts` Is No Longer Your Auth Layer

This one shows up constantly.

❌ Before

// middleware.ts
import { NextResponse } from 'next/server'

export function middleware(req) {
  // auth logic
}

✅ After

Use route handlers, server actions, or framework-native auth solutions
Middleware is now edge-specific and limited

Why this matters

AI overuses middleware because it used to be a catch-all solution.

In modern apps, it's usually the wrong tool.

4. Tailwind v4: No `tailwind.config.js`

❌ Before

module.exports = {
  theme: {
    extend: {}
  }
}

✅ After

Zero-config by default
CSS-first configuration

@theme {
  --color-primary: blue;
}

Why this matters

AI still scaffolds Tailwind like it's 2021.

That leads to unnecessary files and wrong mental models.

5. Forms: `useFormState` Is Not the Move

❌ Before

const [state, formAction] = useFormState(action, initialState)

✅ After

Use native <form action={serverAction}>
Or lightweight client validation where needed

Why this matters

React 19 + Server Actions changed the ergonomics completely.

Yet AI keeps reaching for older abstractions.

6. Routing + Layout Assumptions

AI still:

Overuses client components
Misplaces logic in layouts
Avoids async components

✅ Modern expectation

Layouts are server-first
Components are async by default
Client components are opt-in

The Pattern Behind the Problems

None of these issues are “bugs.”

They’re default mismatches.

AI is trained on:

Older Next.js versions
Mixed patterns
Transitional APIs

So unless you enforce constraints, it will:

Blend paradigms
Reintroduce deprecated logic
Slow your team down

The Solution: Encode Your Standards

That’s what the AI Rules Pack does.

Instead of correcting AI every time, you:

Define rules once
Apply them automatically
Keep outputs consistent across projects

Example Rule (Conceptually)

- NEVER use useEffect for data fetching
- ALWAYS prefer server components
- USE server actions for mutations
- DO NOT create tailwind.config.js

Now scale that across:

Architecture decisions
Naming conventions
Library choices
Auth/data patterns

That’s where this becomes powerful.

The `nextjs-core.mdc` (Free)

Here’s the free core rules file for Next.js:

// nextjs-core.mdc
---
description: Next.js 16 Cache Components — "use cache" directive, cacheLife profiles, cacheTag, updateTag, refresh, and the new caching mental model
globs: "**/*.ts,**/*.tsx"
alwaysApply: true
---

## Next.js 16 — Cache Components

### The New Mental Model

In Next.js 16 with `cacheComponents: true`, **everything is dynamic by default**. Caching is entirely opt-in. This is the opposite of Next.js 13-15 where `fetch()` was cached by default and you had to opt out.

Old model (Next.js 13-15):

- `fetch()` → cached by default
- Add `cache: 'no-store'` to opt out
- `export const revalidate = 60` for ISR
- Confusing implicit behaviour

New model (Next.js 16 Cache Components):

- Everything dynamic by default
- Add `"use cache"` to opt into caching
- `cacheLife()` sets the duration
- `cacheTag()` enables on-demand invalidation
- Explicit, predictable, composable

### Setup

(add ts code block tags here)
// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  cacheComponents: true,

  // Optional: define custom profiles
  cacheLife: {
    products: { stale: 300, revalidate: 900, expire: 86400 },
    dashboard: { stale: 60, revalidate: 300, expire: 3600 },
    blog: { stale: 3600, revalidate: 900, expire: 86400 },
    realtime: { stale: 0, revalidate: 10, expire: 60 },
  },
};

export default nextConfig;
(close code blocks)

### The `"use cache"` Directive

Add at the top of any async function, component, page, or layout to make it cacheable.

(add ts code block tags here)
import { cacheLife, cacheTag } from "next/cache"

// Cache a data access function
export async function getProducts(category: string) {
  "use cache"
  cacheLife("hours")
  cacheTag("products", `category-${category}`)
  // arguments automatically become part of the cache key
  // getProducts("shoes") and getProducts("hats") are separate cache entries
  return db.query.products.findMany({ where: { category } })
}

// Cache a Server Component
async function FeaturedProducts() {
  "use cache"
  cacheLife("hours")
  cacheTag("products")
  const products = await db.query.products.findMany({ where: { featured: true } })
  return (
    <ul>
      {products.map(p => <ProductCard key={p.id} product={p} />)}
    </ul>
  )
}

// Cache an entire page
export default async function BlogPage() {
  "use cache"
  cacheLife("days")
  const posts = await getPosts()
  return <PostList posts={posts} />
}

// Cache a layout
export default async function MarketingLayout({ children }: { children: React.ReactNode }) {
  "use cache"
  cacheLife("max")
  const nav = await getNavLinks()
  return (
    <div>
      <Nav links={nav} />
      {children}
    </div>
  )
}
(close code blocks)

This alone eliminates a huge percentage of bad AI output.

From Dev Tool → Product → Brand

Originally, this wasn’t meant to be a product.

It was just a personal fix.

But then:

I made it reusable
Added a CLI installer
Wrote documentation
Structured it for different stacks

And at some point, I realized:

How am I going to centralize this product and other side projects so people know what they're getting?

That’s when Saastenance was born.

Not just for this pack—but as a storefront for:

Developer tools
AI workflows
Opinionated systems that reflect how things are actually built today

What You Get

The AI Rules Pack includes:

Full rule sets for modern frontend SaaS
Cursor + Claude Code + OpenAI Codex compatibility
CLI installer (one command setup)
Stack customization
Git commit conventions for automatic commit message suggestions
Complementary Cursor Memories guide
Documentation + usage guide

It’s designed to answer one question:

“How do I make AI code like a senior developer on my team?”

Launch Offer

To celebrate the launch, I’m offering:

30% off with code: SAASTELAUNCH30 (valid through May)

Final Thought

AI isn’t replacing developers.

But developers who systemize AI will replace those who don’t.

You can keep correcting outputs…

Or you can define the rules once—and never fight the same battle again.

Get the Full Pack

👉 https://saastenance.com/products/ai-rules-pack-frontend-development

If you're building with modern frontend tools, this will save you hours—and a lot of frustration.

And if nothing else, hopefully this gave you a clearer picture of how Next.js 16 is reshaping the way we write frontend code—and why your AI might still be living in the past.

How to safely parse, merge, or generate .env files (without uploading secrets online)

Diogo Abreu — Fri, 17 Apr 2026 16:00:00 +0000

Working with .env files is something we all do, but it’s surprisingly easy to make mistakes.

Duplicate keys, malformed values, missing quotes… they can be annoying to debug.

At some point I thought:
“Why isn’t there a simple tool that does all the work for me?”

Then I realized something else:
An online .env viewer sounds like a terrible idea.

If I saw one, I’d assume it’s stealing companys' keys.

So I built one with a constraint:
Everything must run 100% in the browser and be 100% safe.

No uploads
No backend
No storage
No network requests at all

All very highlighted and verifiable through devtools.

The result is a small tool that:

Parses .env files instantly
Detects duplicate keys
Highlights syntax issues
Shows everything in a clean table

Additionally, I included some other pages to merge multiple .env files together, or to generate a fresh .env file with the most commonly used keys.

https://env-tools.vercel.app/

I’d really appreciate some feedback, especially on how to make the “this is safe” part clearer. Hope this tool is useful and thank you very much in advance!

DEV Community: Diogo Abreu

How I went from getting tired of explaining the same things to AI, to developing a cutting edge solution, to accidentally creating a brand

The Real Problem: AI Is Only As Good As Its Defaults

Enter: The AI Rules Pack

Breaking Changes in Next.js 16 (That AI Keeps Getting Wrong)

1. Data Fetching: useEffect Is No Longer the Default

❌ Before (what AI still generates)

✅ After (Next.js 16 pattern)

Why this matters

2. Server Actions Replace Client Mutation Logic

❌ Before

✅ After

Why this matters

3. middleware.ts Is No Longer Your Auth Layer

❌ Before

✅ After

Why this matters

4. Tailwind v4: No tailwind.config.js

❌ Before

✅ After

Why this matters

5. Forms: useFormState Is Not the Move

❌ Before

✅ After

Why this matters

6. Routing + Layout Assumptions

✅ Modern expectation

The Pattern Behind the Problems

The Solution: Encode Your Standards

Example Rule (Conceptually)

The nextjs-core.mdc (Free)

From Dev Tool → Product → Brand

What You Get

Launch Offer

Final Thought

Get the Full Pack

How to safely parse, merge, or generate .env files (without uploading secrets online)

1. Data Fetching: `useEffect` Is No Longer the Default

3. `middleware.ts` Is No Longer Your Auth Layer

4. Tailwind v4: No `tailwind.config.js`

5. Forms: `useFormState` Is Not the Move

The `nextjs-core.mdc` (Free)