需要帮助在nextjs中生成静态页面

Question

我正在与Nextjs 13构建一个从GNews api获取数据的新闻应用程序。在主页上，我已经成功地呈现了标题和日期。

下面是我要导入到主页的getData函数。

export async function getData() {
const res = await fetch(`https://gnews.io/api/v4/top-headlines?country=us&category=general&limit=10&token=${process.env.GNEWS_API}`, {  next: { revalidate: 43000 } })

const data = await res.json();
return data.articles
}

首页:

import slugify from "slugify";
import Link from "next/link";
import { getData } from "@/lib/getData";

export default async function Home() {
const articles = await getData();
return articles.map((article: any) => {
const slug = slugify(article.title, {lower: true})
return (
<div key={article.url} className="mb-2">
<Link href={`/articles/${slug}`}>
<h2 className="text-xl text-blue-600 underline">{article.title}</h2>
<p>{article.publishedAt}</p>
</Link>
</div>
)
})
}

请注意，我必须使用slugify来生成文章段塞，因为GNews没有返回一个。

我现在想用这个路径生成整篇文章:文章/(弹头)/page.tsx

我不清楚如何在[slug]/页面上构建整篇文章。带有标题、图片、文章内容等的TSX文件。我知道我需要使用generateStaticParams，以便nextjs了解在构建时生成哪些页面。这是我当前的代码。

import { getData } from '@/lib/getData'
import slugify from 'slugify';
export const generateStaticParams = async () => {
const articles = await getData();
return articles.map((article: any) => ({
slug: slugify(article.title)
}))
}
export default function Article() {
return (
<div>page</div>
)
}

任何帮助与代码将不胜感激。

Answer 1

你可以这样做

import { getData } from '@/lib/getData'
import slugify from 'slugify';
export const generateStaticParams = async () => {
const articles = await getData();
return articles.map((article: any) => ({
slug: slugify(article.title)
}))
}
export default function Article({ params }) { // <- using params
const { slug } = params; // do something
return (
<div>page</div>
)
}

您还可以指定其他字段(img url，描述等)

export const generateStaticParams = async () => {
const articles = await getData();
return articles.map((article: any) => ({
slug: slugify(article.title),
title: article.title,
content: article.content,
// ...
}))
}
export default function Article({ params }) {
const { slug, content, title } = params; // do something
// ...
}

更多信息请点击此处