1

Error al hacer build "npm run build".

Cojo la misma plantilla de "app/(generales)/news/page.tsx" para "app/(generales)/news/[category]/page.tsx".

Linting and checking validity of types  .Failed to compile.

.next/types/app/(generales)/news/[category]/page.ts:28:13
Type error: Type 'OmitWithTag<PostsPageProps, keyof PageProps, "default">' does not satisfy the constraint '{ [x: string]: never; }'.
  Property 'posts' is incompatible with index signature.
    Type 'Partial<{ id: string; title: string; content: string | null; summary: string | null; note: string | null; date: Date | null; imageUrl: string | null; updatedAt: Date; createdAt: Date; ... 18 more ...; pinned: boolean; } & { ...; }>[]' is not assignable to type 'never'.

  26 |
  27 | // Check the prop type of the entry function
> 28 | checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>()
     |             ^
  29 |
  30 | // Check the arguments and return type of the generateMetadata function
  31 | if ('generateMetadata' in entry) {

/// app/(generales)/news/[category]/page.tsx

import fetchPosts from '@lib/data/fetch/fetchPosts';
import PostsPage from '../page'; // [-] Fix. build bug

export default PostsPage;

export async function generateStaticParams() {
  const posts = await fetchPosts();

  const categories = new Set(
    posts.flatMap((post) =>
      post.categories.map((category) => category.slug.toLowerCase()),
    ),
  );

  return Array.from(categories).map((category) => ({
    category,
  }));
}

/// app/(generales)/news/page.tsx

export async function generateStaticParams() {
  try {
    const posts = await fetchPosts(); // Obtener los posts en build time
    const totalEntries = await fetchPostsCount(); // Obtener el conteo de posts en build time
    const categories = await fetchPostsCategories();

    return {
      props: {
        totalEntries,
        posts,
        allCategories: categories,
      },
    };
  } catch (error) {
    console.error('Error fetching data:', error);
    return {
      props: {
        totalEntries: 0,
        posts: [],
        allCategories: [],
      },
    };
  }
}

interface PostsPageProps {
  /// Data
  posts: Partial<Posts & { categories: PostsCategories[] }>[];
  totalEntries: number;
  /// Params
  params: { category?: string };
  searchParams: { [key: string]: number }; // [-] Fix. key en category page
  allCategories: PostsCategories[];
}

export default async function PostsPage({
  /// Data
  posts: initialPosts,
  totalEntries: initialTotalEntries, // Renombrar para evitar duplicados
  /// Params
  params,
  searchParams,
  allCategories: initialCategories,
}: PostsPageProps) {
  /// Fetch Data
  const posts =
    process.env.NODE_ENV !== 'development' ? initialPosts : await fetchPosts(); // Obtener los posts en desarrollo si no están disponibles

  // Filter posts by category if a category is provided
  const filteredPosts = params.category
    ? posts.filter((post) =>
        post.categories?.some((category) => category.slug === params.category),
      )
    : posts;

  const totalEntries = filteredPosts?.length ?? initialTotalEntries;

  /// Pagination
  const page = searchParams[globalData.PAGE_PARAM] || 1; /// 1
  const items_per_page = globalData.NEWS_PER_PAGE; /// 6

Quiero que los post se carguen de forma estática al hacer build de la base de datos.

Me aparece el error del index y no entiendo muy bien por que y como solucionarlo de la forma más eficiente.

/// app/(generales)/news/[category]/layout.tsx

/// Global
import { Metadata } from 'next';
import { notFound } from 'next/navigation';
import { generateStaticParams } from './page';
import React from 'react';

type Props = {
  children: React.ReactNode;
  params: { category: string };
};

async function getCategorySlug(): Promise<Set<string>> {
  const params = await generateStaticParams();
  return new Set(params.map((p) => p.category));
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const categoryName = params.category.toLowerCase();
  const categories = await getCategorySlug();

  if (!categories.has(categoryName)) {
    // notFound();
    return {
      title: '404',
      description:
        'La página que buscas no existe en nuestra web o ha sido movida.',
    };
  }

  const formattedCategoryName =
    categoryName.charAt(0).toUpperCase() + categoryName.slice(1);

  return {
    title: `${formattedCategoryName}`,
    // {absolute: `${formattedCategoryName} | News | Van House Garage`,}
    description: `Posts de la categoría "${formattedCategoryName}" en la web de Van House Garage`,
  };
}

export default async function ProductCategoryLayout({
  children,
  params,
}: Props) {
  const categories = await getCategorySlug();
  if (!categories.has(params.category.toLowerCase())) {
    notFound();
  }
  return children;
}

Añado detalles de "fetchPosts" con prisma.

Texto de relleno. Texto de relleno. Texto de relleno. Texto de relleno. Texto de relleno. Texto de relleno. Texto de relleno. Texto de relleno. Texto de relleno. Texto de relleno. Texto de relleno. Texto de relleno. Texto de relleno. Texto de relleno. Texto de relleno. Texto de relleno. Texto de relleno.

/// lib/data/fetch/fetchPosts.ts

'use server';

import prisma from '@lib/db';

export default async function fetchPosts() {
  try {
    // const page = 1;
    // const pageSize = 6;

    const posts = await prisma.posts.findMany({
      where: {
        published: true,
        author: {
          role: {
            in: ['ADMIN', 'MODERATOR'],
          },
        },
        title: {
          not: undefined, // Not null
          // contains: 'Post', // Contains
          // gt: 'Post', // Greater than
          // lt: 'Post', // Less than
          // endswith: 'Post', // Ends with
        },
        content: {
          not: undefined, // Not null
        },
      },
      orderBy: {
        date: 'desc', // Descending, nuevos primero
      },
      select: {
        id: true,
        title: true,
        summary: true,
        slug: true,
        date: true,
        categories: { select: { name: true, slug: true } },
        // categories: true,
        imageUrl: true,
        imageAlt: true,
        imageTitle: true,
        createdAt: true,
        // stars: true,
      },
      // include {
      //   categories: true,
      // }
      // take: pageSize, // Paginación
      // skip: (page - 1) * pageSize, // Paginación
    });

    // const totalEntries = await prisma.posts.count(); // Total de posts
    // const totalPages = Math.ceil(totalEntries / pageSize); // Total de páginas

    return posts;
  } catch (error) {
    console.error('Error fetching posts:', error);
    throw new Error('Failed to fetch posts data.');
  }

  // return {
  //   props: {
  //     posts,
  //   },
  //   revalidate: 604800, // 7 días en segundos (7 días x 24 horas x 60 minutos x 60 segundos)
  // };
}
5
  • Cómo está definido fetchPosts? Commented el 2 dic. a las 11:27
  • Actualizado el codigo en la pregunta.
    – ViunD
    Commented el 4 dic. a las 16:10
  • 1
    Creo que el problema es porque la función fetchPosts no tiene definido el tipo de lo que devuelve y el compilador se lía al intentar inferirlo del código Commented el 4 dic. a las 23:10
  • Fuff no sé, he intentando tipar todo y nada. Estaba exportando e importando la página de news para la página de categorías, creo que aqui esta el problema. He creado un componente para la NewsPage que uso en la página principal de /news y en /news/[category] pero creo que tengo un problema importando/ exportando y que props tengo que pasarle al componente de NewsPage para cuando va en /news/[category]. Refs: stackoverflow.com/questions/78452369/… , stackoverflow.com/a/79248410/13168750
    – ViunD
    Commented el 7 dic. a las 14:57
  • Solucionado, añadi un comentario explicativo, MUCHISIMAS GRACIAS por la ayuda !!
    – ViunD
    Commented hace 16 horas

1 respuesta 1

1

Solucionado.

  1. Actualice "/shop/[category]/page.tsx" (y la de "/news") por que estaba usando en esa página el diseño de la página de "/shop" y/o "/news", por lo que cree un componente "ItemsPage.tsx" para compartir el diseño entre "shop" y "news".
  2. Añadi tipados a los fetch con ":Promise<DataType>" que esperaba devolver y en el "return data as DataType".
  3. Añadi "generateStaticParams" en "/shop/[category]/[slug]/pages.tsx" que es donde es necesario (en los niveles inferiores) para generar las páginas estáticas, y lo removi en otros sitios donde no era necesario.

Aunque en el resultado del build "shop" y "news" se me genera como "ƒ (Dynamic) server-rendered on demand", lo revisare más tarde esto si es necesario.

Me di cuenta de que "getStaticsParams" o "getServerProps" no son necesarios (no existen) si estoy usando el "app router" de "next.js" en vez de "pages" y que llamando al fetch en el "componente" de página ya lo hace en la build de forma correcta (o eso quiero creer). Además de que no es necesario diferenciar si quiero generar la data con initialData si mi entorno es dev o production como estaba haciendo con los "staticParams".

Sigo teniendo cosas que aprender pero estoy contendo de haberlo entendido después de leerme la documentación (un par de veces al día por una semana ejje) y tener strugles con esto por más de 2 meses jeje. Suerte a todos y gracias.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.