---
title: "JSS Next.jsアプリでSitecoreフォームを実装してください"
slug: "implement-a-sitecore-form-in-a-jss-next-js-app"
abstract: "Next.js JSSアプリケーション内のSitecoreフォームのフロントエンドコンポーネントを実装します"
---
# JSS Next.jsアプリでSitecoreフォームを実装してください

[Sitecoreフォームを作成し、SitecoreのJSSアプリルートに追加](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--using-a-sitecore-form-in-jss-applications.html "Walkthrough: Using a Sitecore form in JSS applications")した後、JSSフォームコンポーネントを実装してJSSアプリケーション内でSitecoreフォームをレンダリングできます。

JSSアプリでSitecoreフォームを使用するには、動作するセッションクッキーが必要です。この目的のために:

-   [環境でSSLを有効にするか、Sitecoreインスタンスでセキュアクッキーを無効にしている必要があります。](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/secure-cookies-and-local-jss-app-development.html "Secure cookies and local JSS app development")
-   あなたのNext.js JSSアプリは [RESTレイアウトサービス](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/jss-layout-api.html "JSS Layout API")を使っています。
-   [あなたはサーバーサイドでルートをレンダリング](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/prerendering-methods-and-data-fetching-strategies-in-jss-next-js-apps.html "Prerendering methods and data fetching strategies in JSS Next.js apps")し、関数GetServerSidePropsの実装を使ってフォームを表示します。

JSS Next.jsアプリケーションでSitecoreフォームコンポーネントをレンダリングするには:

1.  JSSアプリケーションのルートディレクトリで、次のコマンドを実行して必要なパッケージをインストールします:
    
    npm install @sitecore-jss/sitecore-jss-forms @sitecore-jss/sitecore-jss-react-forms
    
2.  レンダリングアプリのsrcディレクトリにあるコンポーネントファイルで、例えばsrc/components/JssNextForm.tsx、フォームコンポーネントを実装します:
    
    import { Form } from '@sitecore-jss/sitecore-jss-react-forms';
    import React from 'react';
    import { withRouter } from 'next/router';
    import { sitecoreApiHost, sitecoreApiKey } from '../temp/config';
    
    const JssNextForm = ({ fields, router }: any) => (
     <Form
     form={fields}
     sitecoreApiHost={''}
     sitecoreApiKey={sitecoreApiKey}
     onRedirect={(url) => router.push(url)}
     />
     );
    
    export default withRouter(JssNextForm);
    
    > !注sitecoreApiHostを *空文字列*に設定しなければなりません。例えば、sitecoreApiHost={''}はNext.jsサーバーにリクエストを送信します。そうでなければ、次のステップで設定した書き換えは期待通りに動作しません。
    
3.  next.config.base.jsファイル内で、CORSや404エラーを防ぐために、接続モードの書き換えに以下の書き換え定義を追加してください。
    
    {
     source: '/api/jss/:path\*',
     destination: \`${jssConfig.sitecoreApiHost}/api/jss/:path\*\`
     },
    
4.  JSSアプリを接続モードで起動してくださいjss start:connected。