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)
// };
}