Share this page!

Enter URL or ID to Unroll

You can paste full URL like: https://x.com/threadreaderapp/status/1644127596119195649
or just the ID like: 1644127596119195649

How to get URL link on X (Twitter) App

  1. On the Twitter thread, click on or icon on the bottom
  2. Click again on or Share Via icon
  3. Click on Copy Link to Tweet
  4. Paste it above and click "Unroll Thread"!
  5. More info at Twitter Help
Lee Robinson Profile picture
Lee Robinson
@leeerob
Building @Vercel. Teaching about React, Next.js, and the web.
Aug 24 • 18 tweets • 7 min read
So, you want to load a cat photo (i.e. the majority of the web).

This image is a high quality .jpg — 3.9mb and 3024 × 4032.

Look, I love my cat (and she thinks she's a wizard), but this is too large.

Here's how Next.js can help. A photo of my siamese cat, Fiona, sitting on a broom. Let's start by bringing in `next/image`.

It's a small abstraction over the `<img>` tag. It's going to help us handle making the page load fast and without visual jank.

<Image src="/cat.jpg" width={3024} height={4032} />

But hmm, this doesn't look right. The photo of my cat is taking up the entire browser height and width, but it's cut off at the bottom. The cat photo is too large.
Dec 18, 2023 • 7 tweets • 3 min read
You have a `Request` – how do you get the visitor geolocation?

Just wrote new docs for @nextjs and wanted to share some of the interesting bits ↓ The `headers()` function allows you to read from the incoming request. For example, here we're pulling `x-forwarded-for` (or `x-real-ip`) in a function. Example code snippet reading the headers function to get the x-forwarded-for value.
Feb 9, 2023 • 8 tweets • 7 min read
2023 State of Databases for Serverless & Edge

An overview of 30+ solutions and emerging trends ↓ I'll focus primarily on transactional workloads in this thread.

Tools that pair well with serverless and edge compute – and tools that are designed to integrate with JavaScript and TypeScript codebases.

Okay, let's begin!
Jan 29, 2023 • 10 tweets • 2 min read
Next.js is a free open-source framework. The creators, Vercel, fund its development.

How is this possible? Why would they give it away for free? Let's talk about funding open-source software (OSS). 2023 will be the year of hyper rationalization for how OSS is funded.

More companies are going to need to sponsor maintainers, and engineers need to do better due diligence for how projects are maintained and funded.
Nov 16, 2022 • 13 tweets • 3 min read
Some of my favorite @vercel sites ▲
Oct 26, 2022 • 10 tweets • 3 min read
⬇️ Everything we launched at Next.js Conf yesterday 1. Next.js 13 – with some of the top requests from the community.

Try out next/image & @​next/font in `pages/` today + incrementally adopt the new router in the `app/` directory as you're ready.

Oct 25, 2022 • 22 tweets • 6 min read
Next.js Conf – live from San Francisco today, with over 100,000 developers registered online.

Photos and tweets from the event ⬇️ 😍
Jun 28, 2022 • 7 tweets • 5 min read
Today, we released Next.js 12.2 🥳

There's *a lot* in this release, so I'd like to dive into why it's such a major evolution of Next.js as we currently know it.

You might notice a common theme: Edge.

Middleware, Edge API Routes, Edge Server-Rendering – all built on Web standard APIs in the Edge Runtime.

vercel.com/blog/introduci…
Jun 13, 2022 • 11 tweets • 2 min read
1/ What makes a great developer experience?

Here are some of my opinions on what separates great frameworks, libraries, APIs, and documentation from the rest.

leerob.io/blog/developer… 2/ Let's start with frameworks and libraries.

To keep developers in the flow, you want to enable them to get started as quickly as possible. Optimize for fast iterations and feedback loops to the developer.
Mar 22, 2022 • 7 tweets • 3 min read
1/ Common web development terms in 280 characters.

Let me know what terms you'd like me to explain and I'll add more to this thread over time. 2/ Compilation

You write code in developer-friendly languages (TypeScript, modern JavaScript, JSX).

Then, compilation transforms it back to standard JavaScript so the browser can understand it. Visual demonstration of compiling code
Jan 13, 2022 • 11 tweets • 3 min read
1/ How can I optimize my frontend for the fastest page load times?

Aiming for sub-100ms load times globally with a server-rendered application.

What would the architecture and infrastructure look like? 2/ Let's talk about latency. You can’t beat the speed of light, so the first requirement is to place your code physically closer to your visitor.

This minimizes the time of a roundtrip between your client and server.

rauchg.com/2014/7-princip…
Aug 24, 2021 • 9 tweets • 6 min read
1/ You want to use serverless. But you've heard about issues connecting to your database...

Here's how can you use databases in serverless environments like AWS Lambda, @vercel, and @Cloudflare. 2/ How does it work with a traditional Node.js server?

1. A request is made
2. The server opens a connection to the database
3. A SQL query is executed
4. The data is returned and the connection is closed

At a large scale, this can hit the maximum number of connections allowed. Diagram showing requests be...
Apr 12, 2021 • 4 tweets • 2 min read
Learned about securityheaders.com today 🔒

Here's how to take your Next.js site to an A. securityheaders.com report for my site leerob.io. 1. Create or update your `next.config.js` file to add `headers`. This will apply the security headers to all routes. See full PR for details: https://github.com/leerob/leerob.io
Jan 25, 2021 • 9 tweets • 3 min read
History of React State Management

• 2013 – Introduction
• 2015 – Redux
• 2016 – MobX
• 2018 – Context
• 2019 – Hooks
• 2019 – Zustand
• 2020 – Jotai, Recoil
• 2021 – useSelectedContext

The future is exciting! Here's a brief summary of how we got here ⬇️ Graphic of the same tweet text showing the history over time React's component model helped create reusable, composable applications. Each component had its own local state.

As web apps became more complex, new solutions emerged to more easily share logic between components.
Jan 21, 2021 • 9 tweets • 5 min read
How to get the best image performance (Updated 2021)

1️⃣ Use `width` and `height` to prevent layout shift
2️⃣ Lazy-load images as they enter the viewport
3️⃣ Use modern image formats (WebP, AVIF)
4️⃣ Serve correctly sized images using `srcset`
5️⃣ Provide blur-up placeholders 1️⃣ Use `width` and `height` to prevent layout shift

These image attributes tell the browser how much space to allocate for an image, preventing the page from jumping when it loads. This avoids Cumulative Layout Shift (CLS).

web.dev/cls/
Jan 3, 2021 • 6 tweets • 2 min read
How to get the fastest web fonts (Updated 2021)

1️⃣ Use a variable font
2️⃣ Preload your font file
3️⃣ Self-host instead of Google Fonts
4️⃣ Use `font-display: optional` to prevent layout shift 1️⃣ Use a variable font

Variable fonts allow you to combine multiple styles and weights (e.g. bold, italic) into a single font file.

web.dev/variable-fonts/