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!
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.
|
Next.js + Next Fetch |
Plain Next.js |
| API implementation |
import { query } from "@next-fetch/swr";
import z from "zod";
export const useMessage = query(
z.object({
name: z.string(),
}),
async function ({ name }) {
return { hello: `world, ${name}` };
}
);
|
import type { NextApiRequest, NextApiResponse } from "next";
export default (req: NextApiRequest, res: NextApiResponse) => {
const name = Array.isArray(req.query.name)
? req.query.name[0]
: req.query.name;
if (!name) {
return res.status(400).json({ error: "No name provided" });
}
return res.status(200).json({ hello: `world, ${name}` });
};
|
| API consumption |
import { useMessage } from "./api/message";
export default function MyPage() {
const { data, error } = useMessage({
name: "John Doe",
});
const hello = data?.hello;
return <div>{/* ... */}</div>;
}
|
import useSWR from "swr";
const fetcher = (url: string) => {
const response = await fetch(url);
if (!response.ok) {
const text = await response.text().catch(() => null);
throw new Error(`response is not okay${text ? `: ${text}` : ""}`);
}
return await response.json();
};
export default function MyPage() {
const { data, error } = useSWR("/api/message?name=John%20Doe", fetcher);
return <div>{/* ... */}</div>;
}
|
