// page.tsx
"use server";
export default async function Page() {
   const data = await fetchData();

  return (
    <Suspense fallback={<Loading/>}> // This Suspense is not working here.
      <INeedSomeData data={data}/>
    </Suspense>
  )
}

// INeedSomeData.tsx
"use client";
export const INeedSomeData = ({data}) => {
  // Component implementation
}

// page.tsx
"use server";
export default async function Page() {
   const data = await fetchData();

  return (
    <Suspense fallback={<Loading/>}> // This Suspense is not working here.
      <INeedSomeData data={data}/>
    </Suspense>
  )
}

// INeedSomeData.tsx
"use client";
export const INeedSomeData = ({data}) => {
  // Component implementation
}

// page.tsx
"use server";
export default async function Page() {
  return (
    <Suspense fallback={<Loading/>}> // This Suspense now works
      <IFetchSomeData />
    </Suspense>
  )
}

// IFetchSomeData.tsx
"use server";
export const IFetchSomeData= async () => {
  const data = await getData();
  return (
    <IRenderData data={data}/>
  )
}

// IRenderData.tsx
"use client";
export const IRenderData = ({data}) => {
  // Component implementation
}

// page.tsx
"use server";
export default async function Page() {
  return (
    <Suspense fallback={<Loading/>}> // This Suspense now works
      <IFetchSomeData />
    </Suspense>
  )
}

// IFetchSomeData.tsx
"use server";
export const IFetchSomeData= async () => {
  const data = await getData();
  return (
    <IRenderData data={data}/>
  )
}

// IRenderData.tsx
"use client";
export const IRenderData = ({data}) => {
  // Component implementation
}

export default async function Page() {
  const params = useParams();
  const { data } = await api.data.getData.query({
     condition1: params.condition1
  });

  return (
       ....
  );
}

export default async function Page() {
  const params = useParams();
  const { data } = await api.data.getData.query({
     condition1: params.condition1
  });

  return (
       ....
  );
}

Unhandled Runtime Error

Error: useParams only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/react-client-hook-in-server-component

Unhandled Runtime Error

Error: useParams only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/react-client-hook-in-server-component

// pages/server-sitemap.xml/index.tsx
import { getServerSideSitemapLegacy } from 'next-sitemap'
import { GetServerSideProps } from 'next'

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  // Method to source urls from cms
  // const urls = await fetch('https//example.com/api')

  const fields = [
    {
      loc: 'https://example.com', // Absolute url
      lastmod: new Date().toISOString(),
      // changefreq
      // priority
    },
    {
      loc: 'https://example.com/dynamic-path-2', // Absolute url
      lastmod: new Date().toISOString(),
      // changefreq
      // priority
    },
  ]

  return getServerSideSitemapLegacy(ctx, fields)
}

// Default export to prevent next.js errors
export default function Sitemap() {}

// pages/server-sitemap.xml/index.tsx
import { getServerSideSitemapLegacy } from 'next-sitemap'
import { GetServerSideProps } from 'next'

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  // Method to source urls from cms
  // const urls = await fetch('https//example.com/api')

  const fields = [
    {
      loc: 'https://example.com', // Absolute url
      lastmod: new Date().toISOString(),
      // changefreq
      // priority
    },
    {
      loc: 'https://example.com/dynamic-path-2', // Absolute url
      lastmod: new Date().toISOString(),
      // changefreq
      // priority
    },
  ]

  return getServerSideSitemapLegacy(ctx, fields)
}

// Default export to prevent next.js errors
export default function Sitemap() {}

 const { page } = router.query;
 const { data, isLoading } = trpc.getMany.useQuery(
        {
            where: {
                createdAt: {
                    gte: twoWeeksAgo,
                },
            },
            page: Number(page) || 1,
        },
        {
            refetchOnMount: false,
            refetchOnWindowFocus: false,
        }
    );

 const { page } = router.query;
 const { data, isLoading } = trpc.getMany.useQuery(
        {
            where: {
                createdAt: {
                    gte: twoWeeksAgo,
                },
            },
            page: Number(page) || 1,
        },
        {
            refetchOnMount: false,
            refetchOnWindowFocus: false,
        }
    );

            <DialogOrSheet> // These components would either render a Dialog, or a Sheet, depending on conditions I set it, or alternatively as a prop. 
                <DialogOrSheetTrigger>Trigger example</DialogOrSheetTrigger>
                <DialogOrSheetHeader>
                    <DialogOrSheetTitle>A cool title</DialogOrSheetTitle>
                </DialogOrSheetHeader>
                <DialogOrSheetContent>...</DialogOrSheetContent>
            </DialogOrSheet>

            <DialogOrSheet> // These components would either render a Dialog, or a Sheet, depending on conditions I set it, or alternatively as a prop. 
                <DialogOrSheetTrigger>Trigger example</DialogOrSheetTrigger>
                <DialogOrSheetHeader>
                    <DialogOrSheetTitle>A cool title</DialogOrSheetTitle>
                </DialogOrSheetHeader>
                <DialogOrSheetContent>...</DialogOrSheetContent>
            </DialogOrSheet>

    const form = useForm<TFormValues>({
        resolver: zodResolver(FormSchema),
        defaultValues,
    });
return (
 <form
        onSubmit={(e) => {
            e.preventDefault();
            console.log("Submitting...");
            form.handleSubmit(
                (data) => {
                    console.log(data);
                },
                (errors) => {
                    console.log(errors);
                }
            );
        }}
    >
        <input type='text' {...form.register('testName')} />
        <input type='submit' />
    </form>

    const form = useForm<TFormValues>({
        resolver: zodResolver(FormSchema),
        defaultValues,
    });
return (
 <form
        onSubmit={(e) => {
            e.preventDefault();
            console.log("Submitting...");
            form.handleSubmit(
                (data) => {
                    console.log(data);
                },
                (errors) => {
                    console.log(errors);
                }
            );
        }}
    >
        <input type='text' {...form.register('testName')} />
        <input type='submit' />
    </form>

export function middleware(req: NextRequest) {
    const session = req.cookies.get('next-auth.session-token');
    // Here I could do a call to my API endpoint which will perform a lookup on my database
} 

export function middleware(req: NextRequest) {
    const session = req.cookies.get('next-auth.session-token');
    // Here I could do a call to my API endpoint which will perform a lookup on my database
} 

      const createdResult = await ctx.prisma.quizResult.create({
        data: {
          score,
        },
      });

    ⛔⛔Unsafe assignment of an `any` value.eslint@typescript-eslint/no-unsafe-assignment⛔⛔

      const createdResult = await ctx.prisma.quizResult.create({
        data: {
          score,
        },
      });

    ⛔⛔Unsafe assignment of an `any` value.eslint@typescript-eslint/no-unsafe-assignment⛔⛔

interface IFilterOptions {
  price: {
    min: number,
    max: number,
  },
  item_type: string[],
  state: string[],

  [key: string]: string[] | {min: number, max: number};
}

interface IFilterOptions {
  price: {
    min: number,
    max: number,
  },
  item_type: string[],
  state: string[],

  [key: string]: string[] | {min: number, max: number};
}

Object.keys(filterOptions).forEach((filter) => {
    if (filter === "price") {
          ....
          return;
      } else if (Array.isArray(filterOptions[filter]) && !filterOptions[filter].includes("test")) 
        ❌❌ -> Property 'includes' does not exist on type 'string[] | { min: number; max: number; }' ❌❌
      }
});

Object.keys(filterOptions).forEach((filter) => {
    if (filter === "price") {
          ....
          return;
      } else if (Array.isArray(filterOptions[filter]) && !filterOptions[filter].includes("test")) 
        ❌❌ -> Property 'includes' does not exist on type 'string[] | { min: number; max: number; }' ❌❌
      }
});