---
title: "ウォークスルー:JSS Next.jsアプリにおけるビルドタイム静的パスのカスタマイズ"
slug: "walkthrough--customizing-build-time-static-paths-in-jss-next-js-apps"
abstract: "カスタムサイトマップフェッチャーで、静的に生成された動的ルートの返される静的パスを制御できます"
---
# ウォークスルー:JSS Next.jsアプリにおけるビルドタイム静的パスのカスタマイズ

多くのページ、製品、記事を持つ非常に大規模なウェブサイトでは、すべてのページの静的生成に時間がかかることがあります。静的生成の一部のページやアイテムを静的生成から除外することで、静的生成アプリケーションのビルド時間を短縮できます。

これは、getStaticPaths関数のカスタマイズsitemap-fetcherを使って、ビルド時に静的に生成されるページパスのリストを修正することで実現できます。

このウォークスルーでは、以下の方法を説明します:

-   カスタムサイトマップサービスを作成しましょう。
-   静的パスのリストをカスタマイズするためにカスタムサイトマップフェッチャーを作成しましょう。

## カスタムサイトマップサービスの作成

クラスGraphQLSitemapServiceやインターフェースGraphQLSitemapServiceConfigを拡張して、特定のアイテムタイプを除外することができます:

1.  src/libで、新しいファイルを作成sitemap-service.ts。
    
2.  新しいファイルでクラスGraphQLSitemapServiceをインポートし、インターフェースはSitecore Next.js SDKからGraphQLSitemapServiceConfigします。
    
    import {
     GraphQLSitemapService,
     GraphQLSitemapServiceConfig,
     } from '@sitecore-jss/sitecore-jss-nextjs';
    
3.  GraphQLSitemapServiceConfigを拡張し、サービス構成に追加オプションを追加してください:
    
    export interface ExtendedSitemapServiceConfig extends GraphQLSitemapServiceConfig {
     /\*\*
     \* Item with sub-paths to exclude
     \*/
    
     excludeItemId?: string;
     }
    
4.  Sitecore Delivery Edgeは検索クエリに有効なIDが必要です。 excludeItemIdオプションを使わない場合、有効だが空のIDを指定する必要があります。 emptyID定数を宣言します:
    
    const emptyId = '{00000000-0000-0000-0000-000000000000}';
    
5.  GraphQLSitemapServiceクラスを拡張し、queryゲッターをオーバーライドして、excludeItemIdにIDを付けた場合、そのタイプの項目を返さないようにします。
    
    export class ExtendedSitemapService extends GraphQLSitemapService {
     protected get query(): string {
     return /\* GraphQL \*/ \`
     query SitemapQuery(
     $rootItemId: String!
     $language: String!
     $pageSize: Int = 10
     $hasLayout: String = "true"
     $after: String
     $excludeItemId: String = "${this.options.excludeItemId ?? emptyId}"
     ) {
     search(
     where: {
     AND: 
     { name: "\_path", value: $rootItemId, operator: CONTAINS }
     { name: "\_path", value: $excludeItemId, operator: NCONTAINS }
     { name: "\_language", value: $language }
     { name: "\_hasLayout", value: $hasLayout }
     
     }
     first: $pageSize
     after: $after
     ) {
     total
     pageInfo {
     endCursor
     hasNext
     }
     results {
     url {
     path
     }
     }
     }
     }
     \`;
     }
     constructor(public options: ExtendedSitemapServiceConfig) {
     super(options);
     }
    
    > !注クエリパラメータに$excludeItemId: String = "${this.options.excludeItemId ?? emptyId}"とs earchクエリ{ name: "\_path", value: $excludeItemId, operator: NCONTAINS }条件も提供しています。
    

## カスタムサイトマップフェッチャーを作成して、静的パスのリストをカスタマイズしましょう

新しいサイトマップサービスが導入されたことで、ニーズに合ったサイトマップフェッチャーを追加できるようになりました。

-   src/lib/sitemap-fetcher.jsでは、新しいサイトマップサービスを含む必要なライブラリをインポートします。
    
    /\* eslint-disable @typescript-eslint/no-var-requires \*/
    import { StaticPath } from '@sitecore-jss/sitecore-jss-nextjs';
    import { GetStaticPathsContext } from 'next';
    import config from 'temp/config';
    import { config as packageConfig } from '../../package.json';
    import { ExtendedSitemapService } from './sitemap-service'; // your new service
    import { ItemIds } from './constants';
    

リファクタリングしたサイトマップフェッチャーを使って、アプリ内の動的ルートの静的パスリストをカスタマイズできます。

### 一部のアイテムタイプを除き、すべてのページを取得してください

新しいExtendedSitemapServiceを使って、特定のアイテムタイプを静的パスのリストから除外するサイトマップフェッチャーを作成できます。

例えば、Products以外のすべてのページを取得する場合:

1.  src/lib/sitemap-fetcher.jsでは、RootSitemapFetcherを実装します:
    
    export class RootSitemapFetcher {
     private \_graphqlSitemapService: ExtendedSitemapService;
    
     constructor() {
     this.\_graphqlSitemapService = new ExtendedSitemapService({
     endpoint: config.graphQLEndpoint,
     apiKey: config.sitecoreApiKey,
     siteName: config.jssAppName,
     excludeItemId: ItemIds.Products, // Exclude products
     });
     }
    
     async fetch(context?: GetStaticPathsContext): Promise<StaticPath> {
     return (process.env.EXPORT\_MODE
     ? this.\_graphqlSitemapService.fetchExportSitemap(packageConfig.language)
     : this.\_graphqlSitemapService.fetchSSGSitemap(context?.locales || )
     ).then((results) => {
     // Compensate for current bug on Delivery Edge where the root '/products' item
     // is being returned from the search query which excludes it ({ name: "\_path", value: $productsItemId, operator: NCONTAINS })
     return results.filter((value) => value.params.path0 !== 'products');
     });
     }
    }
    
2.  RootSitemapFetcherのインスタンスをエクスポートする:
    
    export const rootSitemapFetcher = new RootSitemapFetcher();
    
3.  ファイルsrc/pages/...path.tsxで、RootSitemapFetcherのインスタンスをインポートします:
    
    import { rootSitemapFetcher } from 'lib/sitemap-fetcher';
    
4.  rootSitemapFetcherを使えるように修正・追加getStaticPaths:
    
    export const getStaticPaths: GetStaticPaths = async (context) => {
     if (process.env.NODE\_ENV !== 'development') {
     // Note: Next.js runs export in production mode
     const paths = await rootSitemapFetcher.fetch(context);
    
     return {
     paths,
     fallback: process.env.EXPORT\_MODE ? false : 'blocking',
     };
     }
    
     return {
     paths: ,
     fallback: 'blocking',
     };
    };
    

### 製品のみ取る

新しいExtendedSitemapServiceは特定の種類のアイテムしか取得できません。

例えば、製品のみを取得する場合:

1.  src/lib/sitemap-fetcher.jsでは、積経路のみを返すProductSitemapFetcherを実装します:
    
    export class ProductSitemapFetcher {
     private \_graphqlSitemapService: ExtendedSitemapService;
    
     constructor() {
     this.\_graphqlSitemapService = new ExtendedSitemapService({
     endpoint: config.graphQLEndpoint,
     apiKey: config.sitecoreApiKey,
     siteName: config.jssAppName,
     rootItemId: ItemIds.Products, // Only products
     });
     }
    
     async fetch(context?: GetStaticPathsContext): Promise<StaticPath> {
     return (process.env.EXPORT\_MODE
     ? this.\_graphqlSitemapService.fetchExportSitemap(packageConfig.language)
     : this.\_graphqlSitemapService.fetchSSGSitemap(context?.locales || )
     ).then((results) => {
     results.forEach((value) => {
     value.params.path.shift(); // Remove the leading 'products' path fragment
     });
     return results;
     });
     }
    }
    
2.  フェッチャーのインスタンスをエクスポートする:
    
    export const productSitemapFetcher = new ProductSitemapFetcher();
    
3.  ファイルsrc/pages/products/path.tsxで、ProductSitemapFetcherのインスタンスをインポートします:
    
    import { productSitemapFetcher } from 'lib/sitemap-fetcher';
    
4.  getStaticPaths関数を修正・追加してproductSitemapFetcherを使う:
    
    export const getStaticPaths: GetStaticPaths = async (context) => {
    
     if (process.env.NODE\_ENV !== 'development') {
     // Note: Next.js runs export in production mode
     const paths = await productSitemapFetcher.fetch(context);
    
     return {
     paths,
     fallback: process.env.EXPORT\_MODE ? false : 'blocking',
     };
     }
    
     return {
     paths: ,
     fallback: 'blocking',
     };
     };