Блог

Главная - Вопросы по программированию - Динамическая карта сайта по следующей-карта сайта

Динамическая карта сайта по следующей-карта сайта

#reactjs #next.js

#реагирует на #next.js

Вопрос:

Я хочу добавить server-sitemap.xml в мое следующее приложение js с помощью next-sitemap я буду признателен, если кто-нибудь сможет объяснить, как я могу добавить динамическую карту сайта с помощью next-sitemap в nextjs.

 import { GetServerSideProps } from "next" import { getServerSideSitemap,ISitemapField } from "next-sitemap" const { all_product_get } = require("../../src/api/guest") export const getServerSideProps = GetServerSideProps async (ctx) =gt; { let data = []  await all_product_get().then(res =gt; { data : res.data.data }) const fields :ISitemapField[] = data.map(item =gt; ({loc :`https://sivanland.com/product/detail/${item._id}`, lastmod: new Date().toISOString()})) return getServerSideSitemap(ctx, fields); }; export default function Site(){}

Комментарии:

1. Что вы пробовали, а что не работает?

Ответ №1:

Я решил ее сам.

  1. Добавьте машинописный текст в мой проект: npm i -D typescript
  2. Добавить tsconfig.json в корневой каталог проекта
  3. Используйте TypeScript в NextJS.

tsconfig.json:

 {  "compilerOptions": {  "allowJs": true,  "allowSyntheticDefaultImports": true,  "jsx": "preserve",  "lib": [  "dom",  "es2017"  ],  "module": "esnext",  "moduleResolution": "node",  "noEmit": true,  "noUnusedLocals": true,  "noUnusedParameters": true,  "preserveConstEnums": true,  "removeComments": false,  "skipLibCheck": true,  "sourceMap": true,  "strict": true,  "target": "esnext",  "forceConsistentCasingInFileNames": true,  "esModuleInterop": true,  "resolveJsonModule": true,  "isolatedModules": true,  "incremental": true  },  "exclude": [  "node_modules"  ],  "include": [  "next-env.d.ts",  "**/*.ts",  "**/*.tsx"  ] }
  1. Затем я использовал приведенный выше код с динамическими данными из базы данных:
 import { getServerSideSitemap, ISitemapField } from 'next-sitemap' import { GetServerSideProps } from 'next'   export const getServerSideProps: GetServerSideProps = async (ctx) =gt; { // Method to source urls from cms const response = await fetch('https://newapi.example.com/api/guest/search /product/all'); let items: any = {} items = await response.json();  const fields: ISitemapField[] = items.data.map((item: any) =gt; ({  loc: `https://www.example.com/product/detail/${item._id}`,  lastmod: new Date().toISOString(),  changefreq: 'daily',  priority: '0.7' })); return getServerSideSitemap(ctx, fields) }  export default function Site() { }
  1. Добавить папку: страницы/сервер-карта сайта.xml/индекс.tsx
  2. и вставьте приведенный выше код в файл index.tsx
  3. Добавьте адрес карты сайта в next-sitemap.gonfig.js
 additionalSitemaps: [  'https://example.com/sitemap.xml',  'https://example.com/server-sitemap.xml' ]
Метки: