
> **TL;DR**  
> Stop storing images in `/public`. Compress to WebP, host on **UploadThing** (5 GB free, unlimited bandwidth), and link the CDN URL in `<Image />`.

---

### The hidden cost of the `/public` folder

| **Meter**                                                    | **Pro/Enterprise Extra**    | **Real-world pain**                                                                                      |
| ------------------------------------------------------------ | --------------------------- | -------------------------------------------------------------------------------------------------------- |
| **Image transformations**(every cache **MISS** or **STALE**) | **$0.05–$0.08 / 1 000**     | A 2 MB hero image, 3 viewports, 3 formats = 9 transformations per visitor. 1 112 visitors = $0.50 extra. |
| **Image cache reads**(each 8 KB chunk)                       | **$0.40–$0.64 / 1 000 000** | Same hero image (250 KB) served in Beijing → 32 read units. 100 k hits = $0.20 extra.                    |
| **Image cache writes**(each 8 KB chunk)                      | **$4.00–$6.40 / 1 000 000** | Every new variant (size/format) triggers a write. 10 new variants × 50 k users = $2.00+ extra.           |

> **Plus** the usual **Fast Data Transfer** & **Edge Requests** you already pay for when the image is delivered.

---

### Hobby overage?

- **No charge**, but new images instantly return **HTTP 402** (payment required) and your `<Image>` falls back to the `alt` text.
- Previously optimized images keep working.

---

### Pro trial overage?

- **Trial ends** on the spot—you’re forced to upgrade or lose optimization.

---

### Step-by-step: free, fast, future-proof images

#### 1. Compress & convert to WebP

| Tool              | One-liner                                               |
| ----------------- | ------------------------------------------------------- |
| **Squoosh** (GUI) | Drag → choose _WebP_ → quality 80 % → download `.webp`. |
| **TinyPNG** (GUI) | Drag → auto WebP → download.                            |
| **CLI** (cwebp)   | `cwebp -q 80 in.jpg -o out.webp`                        |

Typical savings: **30–50 % smaller** than JPEG/PNG with no visible loss.

#### 2. Host on UploadThing (no code)

1. [Create account](https://uploadthing.com) (free tier 2 GB storage, unlimited egress).
2. **Upload Files** → drag your `.webp`.
3. Click **Copy URL** → `https://utfs.io/f/abc123def456.webp`.

#### 3. Drop the URL into Next.js

```jsx
import Image from "next/image";

export default function Hero() {
  return (
    <Image
      src="https://utfs.io/f/abc123def456.webp"
      alt="Hero section"
      width={1200}
      height={630}
      priority
    />
  );
}
```

No extra config—UploadThing already sets proper `Cache-Control` headers.

#### 4. Quick checklist

- ✅ Never commit raw PNG/JPG to `/public`.
- ✅ Always compress & convert first.
- ✅ Replace image? Re-upload, swap URL. Old links remain cached worldwide.

---

### Why this works

| Metric                 | Before (`/public`)     | After (UploadThing)          |
| ---------------------- | ---------------------- | ---------------------------- |
| **Bandwidth bill**     | $0.05 - $0.0812 per 1K | **$0**                       |
| **Global CDN**         | Vercel edge (static)   | UploadThing edge (optimized) |
| **Scalability**        | Add GBs → $$           | Add files → free             |
| **Format negotiation** | Manual                 | Automatic (WebP/AVIF)        |

---

### Bonus tips

- **Lazy-load below-the-fold images**

```jsx
loading = "lazy";
```

- **Responsive sizing**

```jsx
sizes = "(max-width: 768px) 100vw, 50vw";
```

- **Monitor usage**
  UploadThing dashboard shows total egress—set a Slack alert if you’re close to any paid tier.

---

### Want to dig deeper?

- [Vercel Bandwidth Pricing](https://vercel.com/pricing)
- [UploadThing Docs](https://docs.uploadthing.com)
- [Next.js Image Optimization](https://nextjs.org/docs/app/getting-started/images)


Optimize images for vercel hosting


Add a button that instantly opens the current page in ChatGPT, Claude, or T3 Chat so users can ask questions about it—without copying or pasting a thing.

---

## Why Add This Button?

Sometimes your users get stuck. This button helps them get instant, smart answers from AI using your page content.

It’s especially useful for:

- Code tutorials and examples
- Troubleshooting guides
- Complex product features
- Learning resources
- Any help page where a user might need clarification

Instead of making users explain the page to ChatGPT, this button does it for them.

---

## Problems with Traditional Help

Old-school help systems don’t always cut it:

- Contact forms take time
- FAQs don’t cover everything
- Search often misses the point
- Live chat needs real people
- Users want help _now_

This button solves all that by giving users direct, AI-powered assistance based on the exact page they're on.

---

## How It Works

The idea is simple: We create a button that links to ChatGPT, Claude, and T3 with the current page's URL and title included in the query. These tools then know what the user wants help with.

---

## Step-by-Step Guide

### 1. Create the Button Component

Create a file called `AskAIButton.jsx` in your `components` folder:

```jsx
"use client";

import { ChevronDown, ExternalLinkIcon, MessageCircleIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

export default function AskAIButton({ slug }) {
  const currentUrl = typeof window !== "undefined" ? window.location.href : "";
  const pageTitle = typeof window !== "undefined" ? document.title : "";

  const q = `Please read the documentation from ${currentUrl} (titled: "${pageTitle}"). I want to discuss or get help with it.`;

  const gpt = `https://chatgpt.com/?${new URLSearchParams({
    hints: "search",
    q,
  })}`;
  const claude = `https://claude.ai/new?${new URLSearchParams({ q })}`;
  const t3 = `https://t3.chat/new?${new URLSearchParams({ q })}`;

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="secondary">
          <MessageCircleIcon className="size-4" />
          Ask AI
          <ChevronDown className="size-4" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56">
        <DropdownMenuItem asChild>
          <a
            href={gpt}
            target="_blank"
            rel="noreferrer noopener"
            className="flex gap-2"
          >
            ChatGPT <ExternalLinkIcon className="size-4 ms-auto" />
          </a>
        </DropdownMenuItem>
        <DropdownMenuItem asChild>
          <a
            href={claude}
            target="_blank"
            rel="noreferrer noopener"
            className="flex gap-2"
          >
            Claude <ExternalLinkIcon className="size-4 ms-auto" />
          </a>
        </DropdownMenuItem>
        <DropdownMenuItem asChild>
          <a
            href={t3}
            target="_blank"
            rel="noreferrer noopener"
            className="flex gap-2"
          >
            T3 Chat <ExternalLinkIcon className="size-4 ms-auto" />
          </a>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}
```

> **Note**: This example uses UI components from [HextaUI](https://hextaui.com?ref=preetsuthar.me), but you can replace them with any UI library or plain HTML.

---

### 2. Add the Button to Your Page

#### For a Static Page

```jsx
import AskAIButton from "@/components/AskAIButton";

export default function HelpPage() {
  return (
    <div>
      <h1>Help Page</h1>
      <AskAIButton />
    </div>
  );
}
```

#### For a Dynamic Blog Page (e.g., `[slug].jsx`)

```jsx
import AskAIButton from "@/components/AskAIButton";

export default function BlogPost({ params }) {
  return (
    <div>
      <h1>Blog Post</h1>
      <AskAIButton slug={params.slug} />
    </div>
  );
}
```

---

## Conclusion

This small addition can dramatically improve your help experience.

- Makes help pages interactive
- Reduces user frustration
- Integrates AI tools seamlessly
- Helps users get the answers they need fast


Add an Ask AI Button in Next.js


## What is llms.txt?

The `llms.txt` file helps artificial intelligence (AI) systems better understand your website by providing a clear outline of your site's structure and content, typically using Markdown syntax. It lists important page URLs and describes their content, making it easier for AI to interpret your site.

Having an accurate `llms.txt` is important—without it, AI tools may struggle to navigate your website or recognize the relationships between different pages. This can decrease your site's visibility in AI-driven search results.

While `llms.txt` is similar to `robots.txt` in that both assist web crawlers, they serve distinct roles. `robots.txt` controls crawler access, whereas `llms.txt` focuses on describing your site's content for AI understanding.

## How to Create & Generate Content for llms.txt

The first step is to create a new file named `llms.txt` in the root directory of your website.

To generate content for `llms.txt`, simply head over to [https://llmstxt.firecrawl.dev/](https://llmstxt.firecrawl.dev/).

![preview](https://i.ibb.co/ccQts2Kn/image.png)

Click on `Enter Firecrawl API key` to enter your Firecrawl API key.

If you don't have one, go to the [https://firecrawl.dev](https://firecrawl.dev) website, create a free account, and find your API key.

Once you get the API key, paste it into the llms.txt generator website and hit save.

![preview](https://i.ibb.co/cXr7jDBJ/image.png)

Here, you can enter your website URL, and it will automatically generate the content for you. You can also edit the content as per your requirements.

Now, just enter the URL of the website you want to generate the `llms.txt` for, and click on `Generate`.

This will automatically generate the content for your `llms.txt` file, so you can simply copy and paste it into your `llms.txt` file.

![preview](https://i.ibb.co/dshptBL9/image.png)

After generating the content, simply copy it and paste it into your `llms.txt` file.

Once done, deploy your website and you will find your `llms.txt` file at `https://yourwebsite.com/llms.txt`.

Here's an example: [https://hextaui.com/llms.txt](https://hextaui.com/llms.txt)

Adding `llms.txt` to your website is a straightforward process that can significantly enhance how AI systems understand and interact with your content. By following the steps outlined above, you can ensure that your site is better equipped for AI-driven applications and search results.

For more information on `llms.txt`, you can refer to the following resources:

- [The /llms.txt file](https://llmstxt.org/)
- [Firecrawl Documentation](https://docs.firecrawl.dev/)


Add llms.txt to your website


Spam bot attacks on forms can be a nuisance, leading to spam submissions and potential security risks. Here's a simple method to prevent spam bot attacks in form submissions using a hidden field.

### Step 1: Add a Hidden Field

Add a hidden field to your form. This field should be invisible to users but visible to bots. For example:

```jsx
const [honey, setHoney] = useState("");

<input
  type="text"
  value={honey}
  onChange={(e) => setHoney(e.target.value)}
  tabIndex="-1"
  area-hidden="true"
/>;
```

### Step 2: Validate the Hidden Field

When processing the form submission, check if the hidden field is empty. If it's not empty, it's likely a bot submission.

```jsx
const handleSubmit = (e) => {
  e.preventDefault();

  if (honey) {
    // This is a bot submission
    console.log("Spam bot detected!");
    return;
  }

  // Process the form submission
  console.log("Form submitted successfully!");
};
```

### Complete Example

```jsx
import React, { useState } from "react";

const Form = () => {
  const [honey, setHoney] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();

    if (honey) {
      console.log("Spam bot detected!");
      return;
    }

    console.log("Form submitted successfully!");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={honey}
        onChange={(e) => setHoney(e.target.value)}
        tabIndex="-1"
        area-hidden="true"
      />
      <button type="submit">Submit</button>
    </form>
  );
};
```

Actual users won't see the hidden field, but bots will fill it out, allowing you to filter out spam submissions easily. This method is simple and effective for preventing spam bot attacks in form submissions.

Read the actual Twitter thread: [Prevent spam bot attacks in form submissions — Twitter thread](https://x.com/preetsuthar17/status/1926188828169015371)


Prevent Spam Bot Attacks in Form Submissions


This is the type of badge you can add to the filename in Fumadocs.

![image](https://pbs.twimg.com/media/GqGozTTbAAAj1ay?format=png&name=360x360)

It is very easy to add a badge to the filename in Fumadocs.

first step is to extend the frontmatter schema.

go to `source.config.ts` file in root folder of fumadocs project and add the following code.

```ts
export const docs = defineDocs({
  docs: {
    schema: frontmatterSchema.extend({
      new: z.boolean().default(false),
    }),
  },
});
```

now we can basically add the frontmatter prop in `lib/source.ts` file.

> Make sure to rename the `lib/source.ts` to `lib/source.tsx`

```ts
export const source = loader({
  baseUrl: "/docs",
  source: docs.toFumadocsSource(),
  pageTree: {
    attachFile(node, file) {
      if (!file) return node;

      const data = file.data.data as {
        new: boolean;
      };

      // JSX nodes are allowed
      if (data.new) {
        node.name = (
          <>
            {node.name}
            <div className="bg-fd-primary">NEW</div>
          </>
        );
      }

      return node;
    },
  },
});
```

now to use this we can just use `new` prop in the frontmatter.

```plaintext
---
title: File Upload
description: Animated and interactive file upload component.
new: true
---
```

final result would be like this.

![image](https://pbs.twimg.com/media/GqGozTTbAAAj1ay?format=png&name=360x360)


Add a badge to the filename in Fumadocs


When linking two pages in a Next.js application, the built-in `<Link>` component allows for seamless client-side navigation. Instead of triggering a full page reload like traditional websites, Next.js uses frontend routing to display the new page instantly, making for a faster user experience.

But that’s not all—Next.js also prefetches linked pages automatically. As soon as a `<Link>` element enters the viewport (i.e., becomes visible on screen), Next.js begins preloading the linked page in the background—provided it’s an internal link within your site. This makes navigation nearly instant when users click the link.

However, this prefetching behavior only works in **production mode**. If you're running your app in development with `npm run dev`, prefetching won't be triggered. To see it in action, stop the dev server, run `npm run build` to generate your production bundle, and start the app with `npm run start`.

You can observe this behavior in your browser’s Network tab. Once the page finishes loading (after the `load` event fires), links that are already visible (i.e., above the fold) start prefetching. Links that are out of view will be prefetched as the user scrolls them into the viewport.

Prefetching happens automatically on fast internet connections (like Wi-Fi or 3G+), unless the browser sends a `Save-Data` header indicating a preference for reduced data usage.

If you want to disable prefetching for a specific link, you can do so by passing `prefetch={false}` to the `<Link>` component:

```jsx
<Link href="/contact" prefetch={false}>
  Contact
</Link>
```


Prefetching content in Next.js


If you’re inside a React component, grab the router instance with the `useRouter` hook:

```js
import { useRouter } from "next/router";

function MyComponent() {
  const router = useRouter();

  // reload the current page
  router.reload(window.location.pathname);
}
```

If you need to trigger a reload from outside a component—for example, in a plain utility module—just import the singleton `Router` instead:

```js
import Router from "next/router";

// reload the current page
Router.reload(window.location.pathname);
```


Force refresh page in Next.js


Minimalist website design is a refined art form focused on simplicity, clarity, and functionality. By stripping away nonessential elements, it highlights what truly matters and creates a seamless experience for visitors.

## 7 Principles of Minimalist Web Design

1. Embrace Simplicity
2. Prioritize User Experience
3. Showcase Quality Visuals
4. Leverage Whitespace
5. Highlight Content
6. Ensure Fast Load Times
7. Implement Clear Calls to Action

### 1. Embrace Simplicity

At the heart of minimalist design is simplicity. A straightforward, uncluttered layout with a restrained color palette, fonts, and graphics creates an inviting environment. Generous whitespace not only enhances aesthetics but also improves readability, allowing your content to shine.

A good example is SquareSpace website, simple and clean showing only content that is important

![squarespace](https://i.imgur.com/5UdMe3o.png)

### 2. Prioritize User Experience

A user-centric approach is essential in minimalist design. Your website should be intuitive, with streamlined navigation and legible typography. Given the increasing use of mobile devices, ensure that your site is responsive and offers a smooth experience on all screen sizes.

![vercel's website](https://i.imgur.com/6EXviAn.png)

### 3. Showcase Quality Visuals

Minimalism does not equate to a lack of visual appeal. Instead, select high-caliber images or illustrations that resonate with your brand’s identity. Opt for unique visuals rather than generic stock photos to add a touch of personality and distinction.

### 4. Leverage Whitespace

Whitespace, or negative space, is a critical design element that lends structure and focus to your layout. It helps guide the visitor’s eye toward key content and creates a sense of balance and harmony throughout the site.

### 5. Highlight Content

In minimalist design, content remains the focal point. Employ concise and precise language to communicate your message effectively. Use headings and subheadings to break up text, making it both engaging and easy to navigate, while avoiding distractions that detract from your core message.

Stripe‘s website is both functional and visually appealing. The website features a clean white background, straightforward typography, and plenty of negative space, making it easy to navigate and understand. The design highlights the company’s products and services without distracting users with unnecessary graphics or information.

![stripe website](https://i.imgur.com/B9F6Mnp.png)

### 6. Ensure Fast Load Times

A hallmark of minimalist design is its ability to enhance performance. By using a lightweight theme, compressing images, and minimizing extraneous code, you can achieve faster load times, thereby improving overall user satisfaction and search engine performance.

### 7. Implement Clear Calls to Action

While the design is minimalist, your calls to action (CTAs) should be unmistakably clear and compelling. Use direct language and contrasting elements to ensure that your CTAs stand out, guiding visitors seamlessly toward the desired actions.

## Conclusion

In summary, minimalist website design is both an art and a science—a pursuit of elegance through simplicity. By adhering to these seven principles, you can craft a website that not only captivates visually but also delivers a superb user experience.

A minimalist approach ensures that every element has a purpose, transforming your website into a sophisticated, efficient, and enjoyable digital space that leaves a lasting impression on visitors. Embrace simplicity, enhance functionality, and let your content take center stage while delighting your audience with a touch of fun and refinement.


Preet Suthar

Work

Writing

Sponsors

Contact