Next jsでのサイトマップの作成

紹介する
もしあなたがすでに自分のサイトを発表していたら、今グーグルで検索した結果に自分のサイトがあれば、人々がアクセスしやすいのではないでしょうか.これを行うためには、多くの人がアクセスして検索レコードに記録する可能性がありますが、これは難しい方法です.そのため、Googleロボットに私のサイトをスクロールするように手動で要求しなければなりません.
したがって、google search consoleにドメインを登録してください.現在の問題は、作成した投稿をアップロードせずにGoogleにのみドメインを表示する場合があります.その時は自らGoogleロボットを案内しますこの時必要なのはSitemapですxml.
パースビューの作成
準備作業はnpmを介してpretty、globby、node-fetchを受信することである.
簡単に手順を説明します.サイトマップファイルを作成し、圧縮して組み合わせます.そして私はその書類をグーグルに提出します.
コードはこの文章を参考にした.リファレンス
🎐静的ページsitemapの作成
次に、静的ページと動的ページによってコードが異なるsitemapを作成します.まず、静的ページの場合から始めます.ルートファイルがある場所にscriptsというフォルダを作成し、このコードを書き込むファイルを作成します.

const fs = require('fs');
const globby = require('globby');
const prettier = require('prettier');

const getDate = new Date().toISOString();
const MY_DOMAIN = "https://kihat.ga";
const formatted = sitemap => prettier.format(sitemap, { parser: "html" });

(async () => {
    const pages = await globby([
        "../pages/*.tsx",
        "!../pages/_*.tsx",
        "!../pages/newpost.tsx",
        "!../pages/categorysetting.tsx",
        //!가 들어가면 반영이 되지 않음
    ]);  
  
    const pagesSitemap = `
        ${pages.map(page => {
            const path = page.replace('../pages/', '').replace('.tsx', '').replace(/\/index/g, '');
            const routePath = path === 'index' ? '' : path;
            return `
                <url>
                    <loc>${MY_DOMAIN}/${routePath}</loc>
                    <lastmod>${getDate}</lastmod>
                </url>
            `;
        }).join('')}
    `;
    
    const generatedSitemap = `
        <?xml version="1.0" encoding="UTF-8"?>
        <urlset 
            xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd"
        >
        ${pagesSitemap}
        </urlset>
    `;
  
    const formattedSitemap = [formatted(generatedSitemap)];
  
    fs.writeFileSync('../public/sitemap/sitemap-common.xml', formattedSitemap, "utf8");
})();

🎐ダイナミックページsitemapの作成
ダイナミックページの場合.同じ場所にファイルを作成し、このコードを書いてください.

const fs = require('fs');
const fetch = require('node-fetch');
const prettier = require('prettier');

const getDate = new Date().toISOString();

const fetchUrl = 'https://kihat.ga/posts';
const MY_DOMAIN = 'https://kihat.ga';

const formatted = sitemap => prettier.format(sitemap, { parser: 'html' });
(async () => {
    const fetchPosts = await fetch(fetchUrl)
        .then(res => res.json())
        .catch(err => console.log(err));
    const postList = [];
    
    fetchPosts.forEach(post => postList.push(post.uuid));
    const postListSitemap = `
        ${postList.map(uuid => {
            return `
                <url>
                    <loc>${`${MY_DOMAIN}/post/${uuid}`}</loc>
                    <lastmod>${getDate}</lastmod>
                </url>
            `;
        }).join('')}
    `;
    
    const generateSitemap = `
        <?xml version="1.0" encoding="UTF-8"?>
        <urlset
            xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd"
        >
            ${postListSitemap}
        </urlset>
    `;
    const formattedSitemap = [formatted(generateSitemap)];
    
    fs.writeFileSync('../public/sitemap/sitemap-posts.xml', formattedSitemap, 'utf8');
})();

ドメインまたはajaxリクエストにデータをインポートする場合は、状況に応じて設定します.
これらのファイルを端末からnodeに実行すると、自動的に作成されます.
🎐圧縮sitemap
作成したサイトマップを圧縮します.同様に、同じフォルダにjsファイルを作成し、このコードを書きます.

const fs = require("fs");
const zlib = require("zlib");
var dirs = ["../public/sitemap"];
dirs.forEach((dir) => {
    fs.readdirSync(dir).forEach((file) => {
        if (file.endsWith(".xml")) {
        // gzip
        const fileContents = fs.createReadStream(dir + "/" + file);
        const writeStream = fs.createWriteStream(dir + "/" + file + ".gz");
        const zip = zlib.createGzip();
        
        fileContents
            .pipe(zip)
            .on("error", (err) => console.error(err))
            .pipe(writeStream)
            .on("error", (err) => console.error(err));
        }
    });
});

同様にnodeで実行すると、独自のgzファイルが作成されます.
🎐圧縮ファイルのマージ
最後に、gzファイルを1つのファイルにマージします.

const fs = require('fs');
const globby = require('globby');
const prettier = require('prettier');

const getDate = new Date().toISOString();

const webrootDomain = 'https://kihat.ga';
const formatted = sitemap => prettier.format(sitemap, { parser: 'html' });

(async () => {
    const pages = await globby(['../public/sitemap/*.gz']);
    
    const sitemapIndex = `
        ${pages.map(page => {
            const path = page.replace('../public/', '');
            
            return `
                <sitemap>
                    <loc>${`${webrootDomain}/${path}`}</loc>
                    <lastmod>${getDate}</lastmod>
                </sitemap>
            `;
        }).join('')}
    `;
    
    const sitemap = `
        <?xml version="1.0" encoding="UTF-8"?>
        <sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
            ${sitemapIndex}
        </sitemapindex>
    `;
    
    const formattedSitemap = [formatted(sitemap)];
    
    fs.writeFileSync('../public/sitemap.xml', formattedSitemap, 'utf8');
})();

送信
このファイルをノードとして実行する場合は、共通フォルダでsitemapを使用します.xmlが生成されます.ではKihatを配備しますga/sitemap.xmlなどのパスをGoogleサイトマップにアップロードすればいいです.端末にcurl http://google.com/ping?sitemap=https://kihat.ga/sitemap.xmlコマンドを入力してもよい.
ここまで、私たちはずっとサイトマップを提出しています.