Hamza Ali Turi
Hamza Ali Turi
PostsComments
TTCTheo's Typesafe Cult
Created by insider on 3/16/2025 in #questions
NextJS api route not working
If its in vercel where you have deployed then look up the runtime logs, there you will see the cause of the error. It has probably something to do with environment variables.
2 replies
TTCTheo's Typesafe Cult
Created by Hamza Ali Turi on 3/11/2025 in #questions
Revalidation for data using next.js 15 route handlers
I was able to come up with a solution, it looks like the way I was fetching the data was wrong: here is the updated code: 
import { ClientInterface } from "@/app/_lib/types";
import ClientsDataTable from "./_components/ClientsDataTable";

async function getClients(): Promise<ClientInterface[]> {
  const res = await fetch("http://localhost:3000/api/clients");
  if (!res.ok) throw new Error("Failed to fetch clients");
  return res.json();
}

export default async function ClientsPage() {
  const clients = await getClients();
  return <ClientsDataTable initialClients={clients} />;
}
import { ClientInterface } from "@/app/_lib/types";
import ClientsDataTable from "./_components/ClientsDataTable";

async function getClients(): Promise<ClientInterface[]> {
  const res = await fetch("http://localhost:3000/api/clients");
  if (!res.ok) throw new Error("Failed to fetch clients");
  return res.json();
}

export default async function ClientsPage() {
  const clients = await getClients();
  return <ClientsDataTable initialClients={clients} />;
}
const ClientsDataTable = ({ initialClients }: ClientsDataTableProps) => {
  const [searchQuery, setSearchQuery] = useState("");
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 5;

  const filteredClients = useMemo(() => 
    initialClients.filter(client =>
      client.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      client.website.toLowerCase().includes(searchQuery.toLowerCase())
    ), [initialClients, searchQuery]);

  const totalPages = Math.ceil(filteredClients.length / itemsPerPage);
  const paginatedClients = useMemo(() => 
    filteredClients.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage),
    [filteredClients, currentPage, itemsPerPage]
  );
....
const ClientsDataTable = ({ initialClients }: ClientsDataTableProps) => {
  const [searchQuery, setSearchQuery] = useState("");
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 5;

  const filteredClients = useMemo(() => 
    initialClients.filter(client =>
      client.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      client.website.toLowerCase().includes(searchQuery.toLowerCase())
    ), [initialClients, searchQuery]);

  const totalPages = Math.ceil(filteredClients.length / itemsPerPage);
  const paginatedClients = useMemo(() => 
    filteredClients.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage),
    [filteredClients, currentPage, itemsPerPage]
  );
....
9 replies
TTCTheo's Typesafe Cult
Created by Hamza Ali Turi on 3/11/2025 in #questions
Revalidation for data using next.js 15 route handlers
It only works for server components from what I've read.
9 replies
TTCTheo's Typesafe Cult
Created by Hamza Ali Turi on 3/11/2025 in #questions
Revalidation for data using next.js 15 route handlers
Upon someone's suggestion, I used router.refresh() but that didnt work as well. The only thing that seems to work is window.location.reload() which ends up doing a hard refresh.
9 replies