• Introduction

Next Fetch

Think in React, instead about routing: Next Fetch is an intuitive way to dynamically fetch data from API endpoints in Next.js, using your favorite libraries.

💃 Import your API endpoints instead of making a stringified dance

🔒 Infer the types end-to-end for your data based on its implementation

⚛ Think in React, instead of routing: you only export a React hook!

🕵 Embrace best-practices: input validation, error handling, etc.

🌐 Use Request and Response classes as building blocks, no matter what runtime you're running on (Node.js or Edge)

📝 Use <Form /> component for making progressive enhanced experiences

🤯 Supports SWR and React Query out of the box!

What does that mean?

Next Fetch is using compile-time transformations to allow you to import your API endpoints instead of referencing them as plain strings, while keeping the type definitions co-located with the implementation. This means you get type-safety and autocomplete for your API endpoints, and save keystrokes and bytes.

import { query } from "@next-fetch/swr";
import z from "zod";
 
export const useMessage = query(
  // use zod or other input validation libraries
  z.object({
    name: z.string(),
  }),
  async function ({ name }) {
    // this.request is a `Request` instance
    return { hello: "world, " + name };
  }
);

import { useMessage } from "./api/message.swr";
 
export default function MyPage() {
  const { data, error } = useMessage({
    // will autocomplete and
    // type-check the input arguments
    name: "John Doe",
  });
 
  // autocompletes and type-checks!
  const hello = data?.hello;
 
  return <div>{/* ... */}</div>;
}