reactjs 下一个js Sitemap静态导出

idv4meu8  于 2023-01-30  发布在  React
关注(0)|答案(1)|浏览(142)

我需要帮助我的NextJs项目建立一个网站Map。我建立了一个无头cms使用graphql和下一步,然而,一切都是静态生成的。我有很多问题,创建一个网站Map。我尝试使用npm的下一个网站Map,但所有的信息,我发现(YouTube和论坛)用于包含“serversideprops”的项目,当我的项目只包含“getStaticProps”和getStaticPaths时。除此之外,我还需要Map来处理动态路径[slug]. js。**我没有使用typescript
下面是我的[slug].js的一部分:

> graphql query....
> 
> export async function getStaticPaths() {   const { posts } = await
> graphcms.request(SLUGLIST);   return {
>     paths: posts.map((post) => ({ params: { slug: post.slug } })),
>     fallback: false,   }; }
> 
> export async function getStaticProps({ params }) {   const slug =
> params.slug;   const data = await graphcms.request(QUERY, { slug });  
> const { posts } = await graphcms.request(QUERY2);   const post =
> data.post;   return {
>     props: {
>       post,
>       posts,
>     },   }; }

谢谢大家!

w1jd8yoj

w1jd8yoj1#

next-sitemap也会根据你生成的静态页面创建路由,问题是你必须在生成项目后运行它。
通常,您应该在项目的基础上有一个如下所示的配置文件:
next-sitemap.config.js

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : 'https://my-fallback-url.com/',
  generateRobotsTxt: true,
  trailingSlash: true,
  targetDirectory: `${__dirname}/public`,
  // Wherever are your pages stored
  pagesDirectory: `${__dirname}/src/pages`,
};

在您的package.json

"scripts": {
    ... other configurations
    "postbuild": "next-sitemap"
  },

这将在你的构建完成后触发next-sitemap,然后你应该找到所有生成的包含你的站点Map的xml文件。

相关问题