CODEWITHSUNDEEP
typescriptnext.js
Nicolas Othmar
Nicolas Othmar

Reputation: 763

How to return redirect from getStaticProps without error from TypeScript?

Problem

I'm using Next.js with TypeScript. I get an error when I try to return a redirect if the data doesn't exist.

Code

import { GetStaticProps } from "next";
import fs from "fs/promises";
import path from "path";

function HomePage({ products }: { products: { id: string; title: string }[] }) {
  return (
    <ul>
      {products.map((product) => {
        <li key={product.id}>{product.title}</li>;
      })}
    </ul>
  );
}

export const getStaticProps: GetStaticProps = async () => {
  const filePath = path.join(process.cwd(), "data", "dummy-backend.json");
  const jsonData = await fs.readFile(filePath);
  const data = JSON.parse(jsonData.toString());

  // THE PROBLEM
  if (!data) {
    return {
      redirect: {
        destination: "/no-data",
      },
    };
  }

  if (data.products.length === 0) {
    return { notFound: true };
  }

  return { props: { products: data.products }, revalidate: 10 };
};

export default HomePage;

Error Message

Type '() => Promise<{ redirect: { destination: string; }; notFound?: undefined; props?: undefined; revalidate?: undefined; } | { notFound: true; redirect?: undefined; props?: undefined; revalidate?: undefined; } | { props: { ...; }; revalidate: number; redirect?: undefined; notFound?: undefined; }>' is not assignable to type 'GetStaticProps<{ [key: string]: any; }, ParsedUrlQuery>'.

Type 'Promise<{ redirect: { destination: string; }; notFound?: undefined; props?: undefined; revalidate?: undefined; } | { notFound: true; redirect?: undefined; props?: undefined; revalidate?: undefined; } | { props: { ...; }; revalidate: number; redirect?: undefined; notFound?: undefined; }>' is> not assignable to type 'Promise<GetStaticPropsResult<{ [key:string]: any; }>>'.

Type '{ redirect: { destination: string; }; notFound?: undefined; props?: undefined; revalidate?: undefined; } | { notFound: true; redirect?: undefined; props?: undefined; revalidate?: undefined; } | { props: { ...; }; revalidate: number; redirect?: undefined; notFound?: undefined; }' is not assignable to type 'GetStaticPropsResult<{ [key: string]: any; }>'.

Type '{ redirect: { destination: string; }; notFound?: undefined; props?: undefined; revalidate?: undefined; }' is not assignable to type 'GetStaticPropsResult<{ [key: string]: any; }>'.

Type '{ redirect: { destination: string; }; notFound?: undefined; props?: undefined; revalidate?: undefined; }' is not assignable to type '{ props: { [key: string]: any; }; revalidate?: number | boolean | undefined; }'.

Types of property 'props' are incompatible.

Type 'undefined' is not assignable to type '{ [key: string]: any; }'.ts(2322)

This error is caused by this block of code

if (!data) {
    return {
      redirect: {
        destination: "/no-data",
      },
    };
  }

Upvotes: 5

Views: 3251

Answers (1)

Nicolas Othmar
Nicolas Othmar

Reputation: 763

Based on this documentation, https://nextjs.org/docs/pages/api-reference/next-config-js/redirects the code should be like this. Both destination and permanent are needed.

if (!data) {
    return {
      redirect: {
        destination: "/",
        permanent: false,
      },
    };
  }

Upvotes: 9

Related Questions