DEV Community: Matvey

How to set up Vercel Image Optimization in TanStack Start

Matvey — Tue, 17 Jun 2025 21:06:58 +0000

While Vercel only provides packages with the <Image /> component for Next.js, Nuxt, and Astro, you can enable Image Optimization in any framework with the Vercel Build Output API.

Step 1: Editing the Vercel config

The first thing we need to do is tell Vercel that we want to use the Image Optimization API. To do that, we need to modify the bundler to add additional parameters to the .vercel/output/config.json file after the build. TanStack Start uses Nitro under the hood, and it provides an easy way to do this. All you need to do is create the nitro.config.ts file with the following content:

export default defineNitroConfig({
  vercel: {
    config: {
      images: {
        domains: ["yourdomain.example.com"], // Change to your domain
        sizes: [
          16, 32, 48, 64, 96, 128, 256, 384, 640, 750, 828, 1080, 1200, 1920,
          2048, 3840,
        ],
        minimumCacheTTL: 60,
        formats: ["image/webp"],
        // Next.js uses the same values for sizes, cacheTTL, and formats
      },
    },
  },
});

Step 2: Implementing the optimization strategy

Now that we've set the config option, when you deploy your app to Vercel, it will proxy the /_vercel/image endpoint to the image optimization service. Now we just need to implement the component to take advantage of it. The next/image package source code has thousands of lines of code, because it needs to support multiple optimization services and multiple different strategies for optimization. Most apps don't need that and we can simplify the logic to this simple hook.

import { useMemo } from "react";

const imageWidths = [
  16, 32, 48, 64, 96, 128, 256, 384, 640, 750, 828, 1080, 1200, 1920, 2048,
  3840,
] as const;

type ImgWidth = (typeof imageWidths)[number];

const getVercelOptimizedUrl = (url: string, width: ImgWidth) => {
  const searchParams = new URLSearchParams();
  searchParams.append("url", url);
  searchParams.append("w", width.toString());
  searchParams.append("q", "75");
  return `/_vercel/image?${searchParams.toString()}`;
};

export const useVercelOptimizedImageProps = (
  src: string,
  width: number,
  height: number,
) =>
  useMemo(() => {
    if (
      !import.meta.env.VITE_VERCEL_ENV ||
      import.meta.env.VITE_VERCEL_ENV === "development"
    )
      return { src, width, height };
    const widths = [
      ...new Set(
        [width, width * 2].map(
          (w) => imageWidths.find((p) => p >= w) || imageWidths.at(-1)!,
        ),
      ),
    ] as [ImgWidth, ...Array<ImgWidth>];
    return {
      srcSet: widths
        .map((w, i) => `${getVercelOptimizedUrl(src, w)} ${i + 1}x`)
        .join(", "),
      width: widths[0],
      height: Math.round((widths[0] * height) / width),
    };
  }, [src, width, height]);

interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
  src: string;
  width: number;
  height: number;
  alt: string;
}

export const Image = ({
  src,
  width,
  height,
  loading = "lazy",
  ...props
}: ImageProps) => {
  const imgProps = useVercelOptimizedImageProps(src, width, height);
  return <img loading={loading} {...imgProps} {...props} />;
};

This component will work exactly the same as the next/image component in 99% of cases.

I hope this post helped you!

If you liked it, follow me on X, the everything app (Formerly Twitter) (Blaze your glory!) or on BlueSky.

Lucia Auth or NextAuth, which one to use in a Next.js project?

Matvey — Sun, 22 Oct 2023 17:48:12 +0000

Most modern apps require some form of authentication. There are many ways to implement it for a new Next.js app. You can, of course, roll your own auth, creating all necessary endpoints and writing all code for creating auth tokens yourself, only using the crypto module. I think every dev should do auth this way at least once, just to understand how everything works on a deeper level, but this approach involves a lot of boilerplate code, and even the smallest bug in the auth implementation can become a critical vulnerability. That's why many devs choose to use third-party services like Clerk or Supabase. They make it super easy to add simple authentication, but the moment after you reach more users than the free plan allows, they can become really pricey. The third and, in my opinion, the best way is to use an open-source auth library, like Auth.js or Lucia. But which one should you choose?

Auth.js

Let's first talk about Auth.js. It started out as NextAuth, a library for Next.js, but now it features adapters for SvelteKit and SolidStart. With it, you create a new API endpoint (or a route handler with /app) and export a handler, provided by the library.

// /src/pages/api/auth/[...nextauth].ts
import NextAuth from 'next-auth';

export default NextAuth({
  /* Configuration here */
});

It provides bindings to get the current user both on the client (with the useSession() hook) and server (getServerSession()). It automatically creates a sign-in page with all necessary inputs, handling all errors, and displaying them to the user (But you can still create your own login page, and most people do).

Lucia Auth

Lucia is a newer, much simpler library. It works on any TypeScript server or framework but requires a bit more setup. It's a lot simpler to understand and much lighter. In their docs, the creator of Lucia calls Auth.js too bloated and opinionated. Instead of occupying its own endpoint, it gives you simple functions like createSessionCookie() or createUser(). With them, you can create an endpoint however you want; you can use tRPC, for example. The other difference is Lucia works only on the server, but you can pass the current session data to the client with a server component or getServerSideProps and use your favorite react state library to store it. To log out a user with Auth.js, we just need to call a logOut() function in the react code, but with Lucia, you need to create a new API endpoint where you call invalidateSession() and setSession(null), and send a request to this endpoint from the frontend. It's more steps, but it's more flexible, and you can choose exactly how you implement everything. When you set up your project, you can copy most of the code from the examples repo, so it's not harder to set up.

Comparison

Both libraries work great with Next.js and different databases and ORMs like Prisma and Drizzle; both support all OAuth services you may need.

So, which one should you use? That depends on the situation. If you just need a simple "Sign in with Discord" button, NextAuth is the fastest way to add it, but I will recommend Lucia if you:

Need to add custom logic to the auth flow.

If you need to add your own logic to the auth flow (for example, allow only users with a certain domain in their email to sign up), it's easy with Lucia: you search to where you call createUser and add an if statement, but with Auth.js, you need to dig through their documentation to find how to add a handler to a createUser event.

Need to use email and password auth.

Auth.js is great for adding "Sign in with Discord" or "Sign in with GitHub" buttons, but they make creating email/password auth intentionally hard, to discourage newer devs from using it, due to security risks. Lucia, on the other hand, provides all necessary documentation and functions to create an email and password login.

In any other situations, both libraries are great.

How I made my resume with HTML and Tailwind CSS

Matvey — Sat, 04 Mar 2023 21:33:13 +0000

My first resume was hastily put together using LibreOffice Writer. However, I soon realized that to increase my chances of getting hired, I needed to create a standout resume that would set me apart from other applicants. Since I didn't want to spend money on an expensive template or learn how to use a PDF editor, I decided to find a way to create a PDF using web technologies. In this post, I will share how I used HTML and Tailwind CSS to create my resume.

Starting the project

I prefer using Tailwind CSS, and the easiest way to create a basic web page with Tailwind is by using Astro. I began by creating a new Astro project with npm create astro@latest using the Empty template. Then, I added Tailwind by running npx astro add tailwind. Now, I have a blank web page that I can customize with HTML and Tailwind.

Creating a page

The webpage is responsive, but the resume must be strictly standard size. I tackled this with a very interesting trick. Did you know you can use centimeters and inches as a css unit? I added h-[297mm] w-[210mm] classes to an element to make it the exact size of a standard A4 paper. Here's the basic template:

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My Cool Resume</title>
  </head>
  <body class="grid min-h-screen place-items-center bg-gray-400">
    <main
      class="m-4 h-[297mm] w-[210mm] overflow-hidden rounded-md bg-white p-8 shadow-lg"
    >
      <!-- Put your content here -->
    </main>
  </body>
</html>

Adding Tech Logos

After filling in the resume, I wanted to also add logos for different programming languages and technologies I have in my resume.

Luckily, I found that in astro you can do it easily with the astro-icon package. This package uses Iconify, an icon library that combines dozens of different icon packs into one. The most interesting icon pack for me was the SVG Logos as it includes all logos for different tech companies, programming languages, etc. Now, adding these icons is as simple as:

<Icon pack="logos" name="rust" class="inline h-5 w-5" /> Rust,
<Icon pack="logos" name="python" class="inline h-5 w-5" /> Python

Converting site to PDF

Now that my new resume looks great, the question was how to convert it to a PDF. In the print menu (Ctrl+P) you can choose a special "Save as PDF" printer and save the page as a PDF. However, when I did it for the first time, I noticed it wasn't perfect, the margins were a lot bigger, background for some elements was missing, etc. Some issues I fixed with CSS, for some I just needed to adjust a setting in the printing menu. Tailwind has a print: prefix for styles that should only be applied while printing. I used it to remove all margins and set the page to use the full width and height while printing. Here's what my updated template looks like:

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My Cool Resume</title>
  </head>
  <body class="grid min-h-screen place-items-center bg-gray-400 print:min-h-0">
    <main
      class="m-4 h-[297mm] w-[210mm] overflow-hidden rounded-md bg-white p-8 shadow-lg print:m-0 print:h-screen print:w-screen print:rounded-none print:shadow-none"
    >
      <!-- Put your content here -->
    </main>
  </body>
</html>

Also, to convert the page correctly, in the print options, under "More Settings" I set "Margins" to "None" and enables the "Background graphics" option.

After making these changes, it converted my resume without any issues.

Conclusion

I hope this post was useful for you. Here is my finished resume. If you use a method described in this post to make a resume, please share it with me on Twitter. Thanks for reading!

Stop Using Express.js in 2023

Matvey — Wed, 01 Mar 2023 02:10:25 +0000

For years, express.js has been the standard choice for building REST APIs with JavaScript or TypeScript. It has around 30 million weekly downloads (twice as much as React), and nearly all beginner tutorials recommend it. However, in today's landscape, there are now alternatives that offer better developer experiences and performance. In this post, we'll explore some of these alternatives and why you should consider them over Express.

What's wrong with Express?

1. It's Unmaintained

Express hasn't seen any major updates or new features in years, with its website last being updated in 2017.

2. It's Slow

Since Express is primarily written in pre-ES6 JavaScript, it misses out on years of performance-enhancing updates and concepts.

3. It doesn't work well with TypeScript

Express wasn't designed with TypeScript in mind and requires a separate types package to work with it. Despite this, you will still encounter lots of anys.

Alternatives to Express

Fastify

Fastify is a modern alternative to Express. It's significantly faster and has a vast ecosystem of plugins. It shares a similar syntax with Express, so most of your Express knowledge will still apply to Fastify. With @fastify/express package, you can even use any express middleware module with fastify. Fastify is the most similar to express out of these alternatives, and It's the easiest to switch to. Use Fastify instead of Express for your next API to get instant performance and DX improvements.

Learn more about Fastify

Hono

Hono is a simple and minimal web framework that is even faster than Fastify. Although it lacks many of plugins, it can still handle most use cases. The primary selling point of Hono is that it can be used with runtimes other than Node.js, like Deno, Bun, or Cloudflare Edge Workers. Using Hono with these runtimes can make it even faster, cheaper and easier to host.

Learn more about Hono

tRPC

If you're building an API solely to consume it in a TypeScript client application (such as a React app), consider using tRPC. With this library, you can declare a function on your backend, and after a simple setup, call it on the frontend. tRPC automatically infers the input and return types of the function, resulting in TypeScript error messages and IntelliSense.

Learn more about tRPC