Forem: Matthew Wang

tRPC 11 Setup for Next.js App router 2025

Matthew Wang — Sat, 18 Oct 2025 11:49:21 +0000

Simple, up-to-date, copy-paste setup guide for your Next.js App Router + tRPC setup.

Usage:

Client

Using the tRPC v11 client with the new syntax.

"use client";

import { useTRPC } from "@/trpc/utils";
import { useQuery } from "@tanstack/react-query";
export function HelloClient() {
  const trpc = useTRPC();
  //                       ↓↓↓↓↓ New Syntax! ↓↓↓↓↓
  const { data, status } = useQuery(trpc.hello.queryOptions());
  return <div>{status}: {data}</div>;
}

Prefetch on server-side

Prefetch on the server side to get faster loads.

import { trpc, prefetch, HydrateClient } from "@/trpc/server";
import { HelloClient } from "./client";

export default async function Page() {
  void prefetch(trpc.hello.queryOptions());
  return (
    <HydrateClient>
      <HelloClient />
    </HydrateClient>
  );
}

Use await instead of void if you want to completely avoid streaming and client-side loading.

Setup

Folder structure:

You may use a src folder if needed.

/app
├── api
│   └── trpc
│       └── [trpc]
│           └── route.ts
├── layout.tsx
├── page.tsx
/trpc
├── client.tsx
├── init.ts
├── query-client.tsx
├── router.ts
├── server.tsx
└── utils.ts

I like to consolidate everything into one tRPC folder for both front and backend. This makes tRPC config easy to manage.

Please setup Next.js if you haven't already.

pnpm create next-app@latest my-app --yes

1. Install deps

Use pnpm or use your package manager of choice

pnpm add @trpc/server @trpc/client @trpc/tanstack-react-query @tanstack/react-query@latest zod client-only server-only superjson

tsconfig.json

Make sure strict mode is set to true in tsconfig

"compilerOptions": {
  "strict": true
  //...
}

2. /trpc/query-client.ts

The TanStack Query Client setup. Superjson is optional but highly recommended for being able to send instances such as the Date object between front & backend.

import {
  defaultShouldDehydrateQuery,
  QueryClient,
} from "@tanstack/react-query";
import superjson from "superjson";

export function makeQueryClient() {
  return new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 30 * 1000,
      },
      dehydrate: {
        serializeData: superjson.serialize,
        shouldDehydrateQuery: (query) =>
          defaultShouldDehydrateQuery(query) ||
          query.state.status === "pending",
      },
      hydrate: {
        deserializeData: superjson.deserialize,
      },
    },
  });
}

3. /trpc/init.ts

This is where you define your base tRPC procedures, middleware, and context. Use your auth of choice.

import { validateRequest } from "@/app/auth";
import { cache } from "react";
import superjson from "superjson";
import { TRPCError, initTRPC } from "@trpc/server";

export const createTRPCContext = cache(async () => {
  /**
   * @see: https://trpc.io/docs/server/context
   */
  // Your custom auth logic here
  const { session, user } = await validateRequest();
  return {
    session,
    user,
  };
});
type Context = Awaited<ReturnType<typeof createTRPCContext>>;

/**
 * Initialization of tRPC backend
 * Should be done only once per backend!
 */
const t = initTRPC.context<Context>().create({
  transformer: superjson,
});

/**
 * Export reusable router and procedure helpers
 * that can be used throughout the router
 */
export const router = t.router;
export const publicProcedure = t.procedure;
export const createCallerFactory = t.createCallerFactory;

export const authenticatedProcedure = t.procedure.use(async (opts) => {
  if (!opts.ctx.user || !opts.ctx.session) {
    throw new TRPCError({
      code: "UNAUTHORIZED",
      message: "Unauthorized",
    });
  }
  return opts.next({
    ctx: {
      user: opts.ctx.user,
      session: opts.ctx.user,
    },
  });
});

4. /trpc/router.ts

This is where you customize your trpc routers for your use-case.

import { publicProcedure, router } from "./init";

export const appRouter = router({
  hello: publicProcedure.query(async () => {
    await new Promise((resolve) => setTimeout(resolve, 500));
    return "Hello World";
  }),
});

// Export type router type signature,
// NOT the router itself.
export type AppRouter = typeof appRouter;

5. /trpc/server.tsx

This is new with tRPC v11 that enables prefetching on the server-side.

import "server-only"; // <-- ensure this file cannot be imported from the client
import {
  createTRPCOptionsProxy,
  TRPCQueryOptions,
} from "@trpc/tanstack-react-query";
import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
import { cache } from "react";
import { createTRPCContext } from "./init";
import { makeQueryClient } from "./query-client";
import { appRouter } from "./router";
// IMPORTANT: Create a stable getter for the query client that
//            will return the same client during the same request.
export const getQueryClient = cache(makeQueryClient);
export const trpc = createTRPCOptionsProxy({
  ctx: createTRPCContext,
  router: appRouter,
  queryClient: getQueryClient,
});

// Optional: Prefetch helper function
export function HydrateClient(props: { children: React.ReactNode }) {
  const queryClient = getQueryClient();
  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      {props.children}
    </HydrationBoundary>
  );
}
// Optional: Prefetch helper function
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function prefetch<T extends ReturnType<TRPCQueryOptions<any>>>(
  queryOptions: T
) {
  const queryClient = getQueryClient();
  if (queryOptions.queryKey[1]?.type === "infinite") {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    void queryClient.prefetchInfiniteQuery(queryOptions as any);
  } else {
    void queryClient.prefetchQuery(queryOptions);
  }
}

6. /trpc/utils.ts

Exports the React provider and hooks with the correct types.

import { createTRPCContext } from "@trpc/tanstack-react-query";
import type { AppRouter } from "./router";
export const { TRPCProvider, useTRPC, useTRPCClient } =
  createTRPCContext<AppRouter>();

7. /trpc/client.tsx

Create the React provider that will be used by your app, integrating TanStack Query & tRPC.

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { createTRPCClient, httpBatchLink } from "@trpc/client";
import { useState } from "react";
import { TRPCProvider } from "./utils";
import { AppRouter } from "./router";
import superjson from "superjson";
import { makeQueryClient } from "./query-client";

function getBaseUrl() {
  if (typeof window !== "undefined")
    // browser should use relative path
    return "";
  if (process.env.VERCEL_URL)
    // reference for vercel.com
    return `https://${process.env.VERCEL_URL}`;
  if (process.env.RENDER_INTERNAL_HOSTNAME)
    // reference for render.com
    return `http://${process.env.RENDER_INTERNAL_HOSTNAME}:${process.env.PORT}`;
  // assume localhost
  return `http://localhost:${process.env.PORT ?? 3000}`;
}

let browserQueryClient: QueryClient | undefined = undefined;
function getQueryClient() {
  if (typeof window === "undefined") {
    // Server: always make a new query client
    return makeQueryClient();
  } else {
    // Browser: make a new query client if we don't already have one
    // This is very important, so we don't re-make a new client if React
    // suspends during the initial render. This may not be needed if we
    // have a suspense boundary BELOW the creation of the query client
    if (!browserQueryClient) browserQueryClient = makeQueryClient();
    return browserQueryClient;
  }
}
export function QueryProvider({ children }: { children: React.ReactNode }) {
  const queryClient = getQueryClient();
  const [trpcClient] = useState(() =>
    createTRPCClient<AppRouter>({
      links: [
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
          transformer: superjson,
        }),
      ],
    })
  );
  return (
    <QueryClientProvider client={queryClient}>
      <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
        {children}
      </TRPCProvider>
    </QueryClientProvider>
  );
}

8. Mount your tRPC api endpoint at /app/api/trpc/[trpc]/route.ts

import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
import { createTRPCContext } from "@/trpc/init";
import { appRouter } from "@/trpc/router";
const handler = (req: Request) =>
  fetchRequestHandler({
    endpoint: "/api/trpc",
    req,
    router: appRouter,
    createContext: createTRPCContext,
  });
export { handler as GET, handler as POST };

8. App router root layout /app/layout.tsx

Finally, wrap your app with the QueryProvider.

// /app/layout.tsx
import { QueryProvider } from "@/trpc/client";

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <QueryProvider>
           {children}
        </QueryProvider>
      </body>
    </html>
  );
}

And there you have it! Start using tRPC in your Next.js app router.

For more details on how to use tRPC.

References

We Tried Recursive React Server Components + Suspense - It Just Worked

Matthew Wang — Fri, 22 Aug 2025 13:37:59 +0000

Tried recursive React components with Server Components + Suspense fully expecting the universe to implode. It just… worked.

Live demo + minimal pattern here

Full Code:


const RATIO = 1 / 1.61803398875;

async function Box(props: {
  placement: "top" | "bottom" | "left" | "right";
  depth: number;
}) {
  if (props.depth > 10) {
    return null;
  }
  await new Promise((resolve) => setTimeout(resolve, 1000));
  return (
    <div
      style={{
        width: `${100 * RATIO}%`,
        ...{
          top: {
            top: 0,
            left: 0,
            transform: "translateY(-100%)",
          },
          right: {
            top: 0,
            right: 0,
            transform: "translateX(100%)",
          },
          bottom: {
            bottom: 0,
            right: 0,
            transform: "translateY(100%)",
          },
          left: {
            bottom: 0,
            left: 0,
            transform: "translateX(-100%)",
          },
        }[props.placement],
      }}
      className="absolute outline outline-white/50 border-white animate-fade-in aspect-square"
    >
      <Suspense fallback={null}>
        <Box
          placement={
            (
              {
                top: "right",
                right: "bottom",
                bottom: "left",
                left: "top",
              } as const
            )[props.placement]
          }
          depth={props.depth + 1}
        />
      </Suspense>
      <div className="absolute inset-0 border border-white text-white overflow-clip">
        <Circle placement={props.placement} />
      </div>
    </div>
  );
}

function Circle(props: { placement: "top" | "bottom" | "left" | "right" }) {
  return (
    <div
      className="rounded-full border border-white absolute overflow-clip aspect-square"
      style={{
        width: `200%`,
        ...{
          top: {
            right: 0,
            bottom: 0,
            transform: "translate(50%, 50%)",
          },
          right: {
            left: 0,
            bottom: 0,
            transform: "translate(-50%, 50%)",
          },
          bottom: {
            left: 0,
            top: 0,
            transform: "translate(-50%, -50%)",
          },
          left: {
            right: 0,
            top: 0,
            transform: "translate(50%, -50%)",
          },
        }[props.placement],
      }}
    >
      <div className="absolute inset-0 animate-flash bg-white/50 opacity-20" />
    </div>
  );
}

“X language is better than TypeScript “ JS ecosystem provides: schema validation, timeouts, throttled concurrency, type safe data sync, error boundaries. Missing just ONE means you have to implement it yourself. Name a language that does it better

Matthew Wang — Wed, 20 Aug 2025 04:58:10 +0000

Dev on a potato 🥔 laptop. Enter, VSCode remote coding

Matthew Wang — Fri, 06 Jun 2025 04:15:41 +0000

Engineers. Read this if your potato laptop is getting slow:

I stopped running dev servers on my M1 mac a year ago and never looked back. Running Docker Containers, Cursor, Arc, etc, all at once became impossible. Here's a step-by-step guide on how to code remotely on a separate machine.

This guide shows you how to set it up in a clean and reliable way.

🛠️ Prerequisites

Before you begin:

✅ You have VSCode installed on your local machine Download here.

✅ You can SSH into your remote machine (ssh user@your.remote.host). I personally have a self hosted ubuntu linux machine instead of VPC to save on cloud costs.

✅ Your remote machine has a Linux-based OS

🚀 Step 1: Install the Remote - SSH extension

1 - Open VSCode

2 - Go to the Extensions panel (Ctrl+Shift+X or ⇧⌘X)

3 - Search for "Remote - SSH" and install it

🧩 Step 2: Configure your SSH access

1 - Set up your SSH config file:

Command Palette (Ctrl+Shift+P or ⇧⌘P) and open ssh config

2 - Add your ssh config

Example:

Host my-remote-machine
  HostName 222.22.22.222
  Port 22
  User matt

🔑 Step 3: Add your SSH key to remote for easy login

1 - Check if you have setup an SSH key

ls ~/.ssh/id_ed25519.pub

2 - Generate one if it doesn't exist

ssh-keygen -t ed25519 -C "your_email@example.com"

3 - Copy key to remote server

ssh-copy-id -i ~/.ssh/id_ed25519.pub yourusername@your.server.ip

The public key will be appended to ~/.ssh/authorized_keys on the remote server

🔗 Step 4: Connect from VSCode

1 - Open the Command Palette (Ctrl+Shift+P or ⇧⌘P)

2 - Type: Remote-SSH: Connect to Host...

3 - Select the dev server you configured

4 - VSCode will establish a secure SSH tunnel and install a small VSCode server on the remote machine

🧪 Step 5: Open your project

Once connected, you can:

Use the File Explorer to open folders on the remote machine

Run your code in the integrated terminal (which runs on the remote host)

Use Git, extensions, and linters just like you would locally

📝 Bonus Tips:

Install extensions (VSCode will install them on the remote host)
Forward ports (for web servers or debugging):
Ports Tab → Forward a Port

With this feature you can directly access a remote machine with localhost!

If Disconnected, just reload your window: Open the Command Palette (Ctrl+Shift+P or ⇧⌘P) -> type & & select Reload Window

TypeScript devs: copy‑paste this 25‑line Result to ship with fewer surprises

Matthew Wang — Sun, 15 Dec 2024 12:41:58 +0000

I'm a tech lead of a startup building IoT management systems. This tiny Result pattern made our services predictable and safer to ship.

In this post you will learn about the Result pattern and I will provide you with the simple TypeScript code for you to copy and past into your codebase.

Our plan:

Why Result beats exceptions for expected errors
25 line implementation that you can Copy & Paste, and ship with fewer surprises.
Full Example Code implementation

The problem with throwing errors

Let's say that we want to make a request to create a post.

The following piece of code may throw and Error and may not have been handled properly in the caller.

async function createPost(input: { post: Post }): Promise<unknown> {
  const _post = Post.parse(input.post); // ❗️ May throw an error
  const res = await fetch(`https://example.com/api/posts`, {
    method: "POST",
    body: JSON.stringify(_post),
    headers: {
      "Content-type": "application/json; charset=UTF-8",
    },
  }); // ❗️ May throw an error

  if (!res.ok) {
    throw new Error("Failed to create Post");
  }

  return await res.json(); // ❗️ May throw an error
}

Try/Catch isn't Type Safe at the error path:

// infra/.../index.ts
// This can be anything that runs at the top level (e.g. a controller, lambda handler, CLI, React server component, server action, etc.)
async function run() {
  try {
    await createPost({
      post: {
        userId: 1,
        title: "Hello",
        body: "World",
      },
    });
  } catch (e) {
    //     ^ we don't know what type of error this is. 
    //       We can't easily handle different error types.
    console.error(e);
  }
}

Result based solution

The result type solution is an idea borrowed from the functional programing world. The Success and Error cases need to be defined explicitly.

We want to treat Errors as outputs and ensure that we never throw errors.

Result Type Implementation

Here's what code using the result type may look like.

import { Result } from "#utils/result";

export async function createPost(input: {
  post: Post;
}): Promise<Result<null, string>> {
  // This just remaps the zod schema error.
  const parsedPost = Post.safeParse(input.post);
  if (!parsedPost.success) {
    return Result.Failure("Failed to validate Post input")
    );
  }

  const _post = parsedPost.data;

  const userRes = await getUserFromId(_post.userId);
  if (!userRes.isOk) {
    // ℹ️ Notice how we can return this failure result directly because it is already a result type.
    return userRes;
  }

  if (userRes.value === null) {
    return Result.Failure(`UserId: ${_post.userId} does not exist`)
    );
  }

  const res = await fetch(`https://example.com/api/posts`, {
    method: "POST",
    body: JSON.stringify(_post),
    headers: {
      "Content-type": "application/json; charset=UTF-8",
    },
  });

  if (!res.ok) {
    return Result.Failure("Failed to create Post");
  }

  let json;
  try {
    json = await res.json();
  } catch (e) {
    return Result.Failure("Failed to parse Post JSON")
    );
  }

  const parsedResponse = PostDTO.safeParse(json);

  if (!parsedResponse.success) {
    return Result.Failure("Failed to validate Post response schema");
  }

  return Result.Success(null);
}

TypeScript will force us to check result.isOk before being able to access result.value. This makes use of discriminated unions.

Implement the Result type yourself with 25 lines of code.

This piece of code has been running throughout our production codebase. Feel free to copy and paste.

This solution is highly inspired by other functional TypeScript libraries.

I find including such libraries not worth it for simply wanting better error handling, especially if you work in a team.

// /utils/result.ts
export type Failure<E> = {
  isOk: false;
  error: E;
};

function Failure<E>(error: E): Failure<E> {
  return {
    isOk: false,
    error,
  };
}

export type Success<T> = {
  isOk: true;
  value: T;
};

function Success<T>(value: T): Success<T> {
  return {
    isOk: true,
    value,
  };
}

export type Result<T, E = never> = Success<T> | Failure<E>;
export const Result = {
  Failure,
  Success,
};

The Result Object can be boiled down to the following structure.

Failure Object

{
  isOk: false,
  // E is the generic type of the error. Can be anything (Error, string, etc.
  error: E; 
}

Success Object

{
  isOk: true,
  value: T; // T is the generic type of the value
}

Full example with Result Type

Let's reimplement our createPost() function in include contextual information and stack tracing.

With the Result based solution, the errors and self-documenting and type-safe.

import { Result } from "#utils/result";
import z from "zod";
export * as API from "./apiWrapper";

// Custom error classes allows us to keep stack trace
export class StatusError extends Error {
  name = "StatusError" as const;
}

export class JsonError extends Error {
  name = "JsonError" as const;
}

export class ParseError extends Error {
  name = "ParseError" as const;
}

export class NetworkError extends Error {
  name = "NetworkError" as const;
}

export class ValidationError extends Error {
  name = "ValidationError" as const;
}

type Post = z.infer<typeof Post>;
const Post = z.object({
  userId: z.number().min(1),
  title: z.string().min(5),
  body: z.string().min(10),
});

export async function createPost(input: {
  post: Post;
}): Promise<
  Result<
    null,
    | UserDoesNotExistError
    | StatusError
    | JsonError
    | NetworkError
    | ValidationError
    | ParseError
  >
> {
  // This just remaps the zod schema error.
  const parsedPost = Post.safeParse(input.post);
  if (!parsedPost.success) {
    return Result.Failure(
      new ValidationError("Failed to validate Post input", {
        cause: parsedPost.error,
      })
    );
  }

  const _post = parsedPost.data;

  const userRes = await getUserFromId(_post.userId);
  if (!userRes.isOk) {
    // Notice how we can return this failure result directly because it is already a result type.
    return userRes;
  }

  if (userRes.value === null) {
    return Result.Failure(
      // It's good to include contextual information such as userId for better error messages.
      new UserDoesNotExistError(`UserId: ${_post.userId} does not exist`)
    );
  }

  const res = await fetch(`https://example.com/api/posts`, {
    method: "POST",
    body: JSON.stringify(_post),
    headers: {
      "Content-type": "application/json; charset=UTF-8",
    },
  });

  if (!res.ok) {
    return Result.Failure(new StatusError("Failed to create Post"));
  }

  let json;
  try {
    json = await res.json();
  } catch (e) {
    return Result.Failure(
      new JsonError("Failed to parse Post JSON", {
        cause: e,
      })
    );
  }

  const parsedResponse = PostDTO.safeParse(json);

  if (!parsedResponse.success) {
    return Result.Failure(
      new ParseError("Failed to validate Post response schema", {
        cause: parsedResponse.error,
      })
    );
  }

  return Result.Success(null);
}

Pattern match your errors with switch case. Handle or throw them as you please.

💡 I generally just throw (Panic) for database errors since it indicates that something is horribly wrong. Only expected errors (Domain errors) will be passed to the failure path.

import { API } from "#apiWrapper";

// infra/.../index.ts
// This can be anything that runs at the top level (e.g. a controller, lambda handler, CLI, React server component, server action, etc.)
export default async function run(input: {
  userId: number;
  post: {
    title: string;
    body: string;
  };
}): Promise<{
  errorMessage?: string;
}> {
  const res = await API.createPost({
    post: {
      userId: input.userId,
      title: input.post.title,
      body: input.post.body,
    },
  });

  if (res.isOk) {
    return {};
  }

  captureError(res.error);

  // Handle different error types
  switch (res.error.name) {
    case "NetworkError":
      // We want to crash on network errors
      throw res.error;
    // Return generic error message for other errors as we don't want to expose internal error details
    case "UserDoesNotExistError":
      return {
        errorMessage: "User does not exist",
      };
    case "StatusError":
      return {
        errorMessage: "Failed to create post",
      };
    case "JsonError":
      return {
        errorMessage: "Failed to parse response",
      };
    case "ValidationError":
      return {
        errorMessage: "Invalid post input",
      };
    case "ParseError":
      return {
        errorMessage: "Failed to validate response",
      };
  }
}

// Can use telemetry to capture errors such as Sentry.io, OpenTelemetry, etc.
function captureError(e: unknown) {
  console.error(e);
  Sentry.captureException(e);
}

💡 Note: You can also just use a generic Error type Result<..., Error>. This example just illustrates that you can include different error types.

Serializable Result

Using primitives for Values/Errors allows the Result Types to be serializable.

function validateUser(): Result<{userId: number}, "UserValidationError">
    ...
    return Result.Failure("UserValidationError");
}

💡 Note: With strings as errors, we lose the stack trace.

Arguments against Result Type

If one forgets to handle the returned result. The Error can be lost.

It is best to also return the result or map the result error to another return value to avoid this caveat.

Needing wrappers for functions that throw.

This is a good tradeoff for production applications.

Code may look unfamiliar.

The actual result code is only 25 lines. If your teammates still prefer using try/catch, then yes. It is better to avoid the Result pattern.

References

Two Types of Errors. (2024). Effect Documentation. https://effect.website/docs/error-management/two-error-types/

‌Wlaschin, S. (2018). Domain modeling made functional: Tackle software complexity with domain-driven design and F#. Pragmatic Bookshelf.

Code used in article

Use GitHub and Linux? Setup ssh permissions in 59 seconds

Matthew Wang — Sat, 19 Oct 2024 11:28:35 +0000

TLDR

ssh-keygen -t ed25519 -C "email@example.com" 

eval "$(ssh-agent -s)"

ssh-add ~/.ssh/id_ed25519

cat ~/.ssh/id_ed25519.pub 

# Copy public key

# Create & Paste into GitHub deploy keys

git clone git@github.com:USER/foo.git

I often forget how to set up GitHub ssh keys for deployment. Here is a quick guide on how to set it up.

All of these commands can be found on GitHub's guides but spread around many pages. This guide consolidates them

1. Create your unique ssh key pair.

It's recommended to use the ed25519 algorithm instead of rsa nowadays.

Note: the email doesn't do anything. It's just for labeling.

ssh-keygen -t ed25519 -C "myemail@example.com"

If you already have a pair of ed25519 keys you may skip this step.

This will prompt you to save the key to a location. Using the default location is fine.

Generating public/private ed25519 key pair.
Enter file in which to save the key (/Users/me/.ssh/id_ed25519)

Just press enter.

Create a passphrase if needed. Otherwise, just press enter.

Enter passphrase (empty for no passphrase): [Type a passphrase]
Enter the same passphrase again: [Type passphrase again]

2. Start ssh-agent

eval "$(ssh-agent -s)"

Why use eval? ssh-agent -s generates the bash code to run. Then, we use eval to run that code.

3. Add the key to your ssh-agent

ssh-add ~/.ssh/id_ed25519

4. Copy the public key

cat ~/.ssh/id_ed25519.pub

Copy output public key

5. Create Github deploy key

Your Repo > Settings > Deploy Keys

Paste your public key into your new deploy key for your repo.

6. Pull from your GitHub Repo

Code Dropdown > SSH Tab > Copy URL

git clone git@github.com:USER/foo.git

And you're done!

References

Github: Managing deploy keys

Github: Generating a new SSH key and adding it to the ssh-agent

Github: Adding a new SSH key to your GitHub account

Save 1000 hours in development time. VSCode shortcuts & Window Management

Matthew Wang — Wed, 18 Sep 2024 12:55:04 +0000

Cover photo by SpaceX Starlink Mission

If you could save 2 minutes every hour of development for 20 years, you could save at least 1000 hours in your life-time.

Being familiar with your development environment also means less context-switching.

How often do you forget what you are doing in the middle of trying to find that one piece of code?

⌨️ VSCode shortcuts

⌘ = command, ⌥ = option, ⌃ = control, ⇧ = shift

VSCode Navigation

Search file
Mac ⌘ + P
Windows ctrl + P

Search text
Mac ⌘ + ⇧ + F
Windows ctrl + ⇧ + F

Show commands / Command Pallete
Mac ⌃ + ⇧ + P
Windows ctrl + ⇧ + P
This one is very useful for when we need to restart the Typescript or eslint server or go to your settings.

Switch recent files
Mac ⌃ + tab
Windows ctrl + tab
Quickly switch between the latest files you opened.

Go back
Mac ⌃ + - or PageBack
Windows alt + - or PageBack

This command switches to where your cursor was. Use this one to quickly go back to where you were.

Go forward
Mac ⌃ + ⇧ + - or PageBack
Windows ctrl + ⇧ + - or PageBack

Go to definition
Click on a function or variable to go to where it's defined.
Mac ⌘ + left-click or F12
Windows ctrl + left-click or F12

Go to start/end of file
Mac ⌘ + UpArrow/DownArrow
Windows ctrl + Home/End

Toggle terminal
Mac ⌃ + `
Windows ctrl + `

VSCode Editing

Code suggestions / Auto complete / Trigger Suggestions

Mac ⌥ + esc
Windows ctrl + space

Quick Fix

Mac command + .
Windows ctrl + .

This command shows you ways to quickly fix errors, auto-add imports, auto-refactor, or gpt copilot actions if applicable.

Comment lines of code
Mac ⌘ + K + C
Windows ctrl + K + C

Uncomment lines of code
Mac ⌘ + K + U
Windows ⌘ + K + U

Move line up or down
Mac ⎇ + UpArrow or ⎇ + DownArrow
Windows alt + UpArrow or alt + DownArrow

Delete line
Mac ⌘ + ⇧ + K
Windows ctrl + shift + K

Rename variable
Mac F2
Windows F2
This command renames all instances of the variable. (Although sometimes it fails to do so)

Select multiple same
Mac ⌘ + D
Windows ctrl + D
Most should know this one.

Select multiple lines
Mac ⌥ + ⌘ + UpArrow or ⌥ + ⌘ + DownArrow
Windows ctrl + alt + UpArrow or ctrl + alt + DownArrow

⭐️ Bonus: Clipboard history
Mac:

Install Flycut
⌘ + ⇧ + V to access clipboard history

Windows:

WindowsKey + V Windows has this feature natively.

⭐️ Bonus 2: Open VSCode in your terminal
Install:

Open command palette (Mac: ⌃ + ⇧ + P; Windows: ctrl + ⇧ + P)
Type install code

Run in terminal

code .

Or specify file path

code ./my-codebase

⭐️ Bonus 3: VSCode context
If you didn't know, VSCode actually shows what "context" you're currently in at the top left. This is useful for nested code.

⑆ Git in VSCode

Staging files

I always use the Git tab in VSCode to check & stage each file one by one before filing PR.

If you're a dev working on my team, I would expect the same.

Then just commit as you would normally do.

Git blame: GitLens extension

GitLens is a great extension to see who committed each line.

It uses git blame underneath to see which commit or who is responsible for each line of code.

This is very useful if you need to inspect what context this code was written in and why this code exists.

🪟 Window Management

Let's keep things simple. IMO using the desktop switching feature on both Mac & Windows is slow and cumbersome.

Use these instead.

Mac Window Management

⌘ + tab to switch between applications
⌘ + ` to switch between the instances of the same application
⌘ + Q to quit and application

Windows Window Management

alt + tab to switch windows

Next.js app router avoids repeated serialization embeds when passing from server to client components

Matthew Wang — Tue, 17 Sep 2024 07:46:21 +0000

You may know that passing data from server to client component means that Next.js needs to serialize the data before passing it to the client.

import ClientComp from "./ClientComp";

// Server component
export default function TestPage() {
  const data = { rabbit: "Rabbit", hole: "Hole" };
  return (
    <div>
      <ClientComp data={data} />
      <ClientComp data={data} />
      <ClientComp data={data} />
      <ClientComp data={data} />
      <ClientComp data={{ copy321: "copy321", copy123: "copy123" }} />
      <ClientComp data={{ copy321: "copy321", copy123: "copy123" }} />
      <ClientComp data={{ copy321: "copy321", copy123: "copy123" }} />
      <ClientComp data={{ copy321: "copy321", copy123: "copy123" }} />
    </div>
  );
}

This data is embedded in the html that is fetched.

Does that mean that duplicate data will be embedded repeatedly?

Actually no! (if you use the same reference)

Next.js ensures that the same reference is not embedded multiple times.

The data will be embedded repeatedly only if you create a non-equal object (new reference).

Note: using the same reference works even for nested server components.

export default function TestPage() {
  const data = { rabbit: "Rabbit", hole: "Hole" };
  return (
    <div>
      <ClientComp data={data} />
      <ClientComp data={data} />
      <ClientComp data={data} />
      <ClientComp data={data} />
      <Nest data={data} />
    </div>
  );
}

function Nest(props: { data: Record<string, string> }) {
  return (
    <div>
      <ClientComp data={props.data} />
      <ClientComp data={props.data} />
      <ClientComp data={props.data} />
      <ClientComp data={props.data} />
    </div>
  );
}

This is great to know if you are optimizing for performance on large data sets.

Create Your Text Based AI App with GTP-3 and Next.js

Matthew Wang — Mon, 11 Jul 2022 05:57:03 +0000

The OpenAI team has made it easier than ever to interact with the GPT-3 AI. You can easily create your own project using the OpenAI API. This tutorial will explore how to interact with OpenAI's GPT-3 API using Next.js.

OpenAI also gives you $14.58 worth of credits free to use.

🎹 Play with the AI first

Before starting, I recommend you play with the AI here so that you have an idea as to how it works.

🤟 Let's Start

We'll create a simple Advice Generator App for this guide.

The live example GTP-3 project.

🔧 Setup Next.js and install OpenAI

npx create-next-app@latest

npm i openai

🔑 Get Your OpenAI API Key

Get your API key here.

Include your OpenAI api key in your .env.local file.

.env.local

OPENAI_API_KEY=your-openai-api-key

The following code fetches the response from OpenAI

Please note: The OpenAI node.js library cannot be used on the client and must be used server-side.

const configuration = new Configuration({
    apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

const completion = await openai.createCompletion({
            model: "text-davinci-002",
            prompt: `Replace this string with your prompt`,
            max_tokens: 200,
        });
console.log(completion.data.choices[0].text);

We can see we pass an options object to the createCompletion() function. Here are some things to consider:

model: Choose between text-davinci-002, text-curie-001, text-babbage-001, or text-ada-001 from most capable to least powerful. The mode capable the AI the more effective it is at giving a good response. Keep in mind the more capable the AI the more expensive and slow the usage is.
prompt: The question or text that you want the AI to complete.
max_tokens: The length limit of the response (The more tokens the more expensive).

If you want to go more indepth please checkout this link.

🔨 Let’s set up an API endpoint

/pages/api/advice

const { Configuration, OpenAIApi } = require("openai");

//Setup OpenAI
const configuration = new Configuration({
    apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

const handler = async (req, res) => {
    switch (req.method) {
        case 'GET':
            await getAdvice(req, res);
            break;
        default:
            res.setHeader('Allow', ['GET'])
            res.status(405).end(`Method ${req.method} Not Allowed`)
    }

}

const getAdvice = async (req, res) => {
    try {
        const completion = await openai.createCompletion({
            model: "text-davinci-002",
            prompt: `Give me some advice on ${req.query.prompt}`,
            max_tokens: 200,
        });
        res.status(200).json({ text: completion.data.choices[0].text });
    } catch (error) {
        if (error.response) {
            res.status(error.response.status).send(error.response.data);
        } else {
            res.status(500).send(error.message);
        }
    }
}

export default handler;

😊 Make a get request from anywhere in your project

const res = await fetch(`/api/advice?prompt=${input}`);
const data = await res.json();
console.log(data.text);

Make a get request to /api/advice?prompt=your-prompt

Setup your frontend anyway you like.

You may also use my example on Github.

See full code on Github

😀 Thanks for reading!

I'm currently looking for help on the project Emoji Story

Please reach out to wmatthew123@gmail.com if you're interested. Thank You!

Or Reach Out to me at:

Twitter: matodev
Instagram: matowang
LinkedIn: matowang

My personal website

Handle Multiple Promises using Async/Await

Matthew Wang — Sat, 07 May 2022 17:26:34 +0000

In this example below, we loop through an Array of userIDs to fetch information about the user.

A naive approach may be to await each response one by one.

❌ The wrong and slow way

userIDs = ['fooID1', 'fooID2', ...]
const slowMethod = async (userIDs) => {
    const results = [];
    for (let i = 0; i < userIDs.length; i++) {
        const res = await fetch(`https://api.foo.com/users?uid=${userIDs[i]}`)
        const data = await res.json()
        results.push(data);
    }
    return results;
}
await slowMethod(); //O(n) time

✔️ The Fast Way

userIDs = ['fooID1', 'fooID2', ...]
const fastCleanMethod = async (userIDs) => {
    const promises = userIDs.map(async userID => {
        const res = await fetch(`https://api.foo.com/users?uid=${userID}`);
        return await res.json();
    });
    return await Promise.all(promises);
}
await fastCleanMethod(); //O(1) time

🧐 How it works

The fast method takes advantage of the Promise.all() method. The way it works is by fetching all the data first, then using Promise.all() to resolve/reject later.

By doing this, we do not have to wait for each response one by one.

Another Example of two separate fetches

Let's say we want to fetch user data and their entries. Here are two ways to do it.

❌ Fast but Fails Slow

const getUserData = async (userIDs) => {
    const userDataPromise = fetch(`https://api.foo.com/users?uid=${userID}`);
    const userEntriesPromise = fetch(`https://api.foo.com/entries?uid=${userID}`);

    const [userDataRes, userEntriesRes] = [(await userDataPromise).json(), (await userEntriesPromise).json()];
    const [userData, userEntries] = [await userDataRes, await userEntriesRes];
    return {
        ...userData,
        userEntries,
    }
}

This method works well in most cases but if the second Promise is rejected bad things can happen. The reason it fails slow is because if the second Promise is rejected, the first Promise still runs for the whole duration.

Stack Overflow user @T.J. Crowder explains parallel Promise patterns best here.

✔️ Fast and Fails Fast

const getUserData = async (userIDs) => {
    const userDataPromise = fetch(`https://api.foo.com/users?uid=${userID}`);
    const userEntriesPromise = fetch(`https://api.foo.com/entries?uid=${userID}`);

    const [userDataRes, userEntriesRes] = await Promise.all([userDataPromise, userEntriesPromise]);
    const [userData, userEntries] = await Promise.all([userDataRes.json(), userEntriesRes.json()]);
    return {
        ...userData,
        userEntries,
    }
}

We use Promise.all() because when a Promise is rejected, it immediately throws an error without waiting for other Promises.

It may be tempting to use pure async/await for handling multiple Promises but Promise.all() is still our best bet.