「APIによるコンテンツなどの配信連携」 第4回～Next.js×NotionによるWebサイト開発～
あいさつ
こんにちは。株式会社トッカシステムズの@knaganoです。
今回の内容は
社内研修の一環としてテーマ「APIによるコンテンツなどの配信連携」についての技術発表に取り組んだ内容を紹介していきます。
連載記事としては最終回となりますが、
今回はNotionで書いたページをそのままにWebサイトとして公開する方法を紹介させていただきます。
１.NextJSテンプレートの準備
前回記事同様にNext.js用テンプレートリポジトリからcloneします。
今回は以下テンプレートを利用させていただきました。
ディレクトリ内Console等CLIで以下コマンドを実行してください。
npm install
npm run dev
ブラウザから以下URLへアクセスしてください。
(http://localhost:3000/)
デフォルトページの内容が表示されていれば問題ありません。
２.Notion上にWeb公開用ページを用意
Notionにログインして、Web公開用にnotionページを作成しておきましょう。
今回は弊社コーポレートサイトから画像資材をお借りしましてnotionページ上に自社サイトのNotion版のような内容のぺージを作成することにしました。
次にcloneしたリポジトリ内のsite.config.tsファイルを開き、
5行目のrootNotionPageIdを作成したnotionページのURLに付属しているIDの値へ変更しましょう。
さらにお問い合わせフォームも用意してみましょう。
今回はnoway formというサービスを利用して作成した入力フォームを
notion内へリンク埋め込みで設置することで実装しています。
３.NotionページをWebブラウザ上に表示
再度画面にアクセスしてみましょう。
(http://localhost:3000/)
先ほどNotionで書いたページが読み込まれてWebブラウザ上で表示させることができました。
お問い合わせフォームに内容を入力して送信ボタン押してみましょう。
投稿された内容がnotion側に予め用意したデータベース内へそのまま格納されるようになっています。
お問い合わせされた内容がnotion内ですぐに扱えるのでとても便利ですね。
４.さいごに
今回のテーマ発表に向けていろいろと調べているなかで、
notionはただの社内ナレッジ管理ツールにとどまらず、
Webサイトのバックエンドとしてデータベースや資材管理（CMSのような)にも使うことができると分かり、
今後幅広い用途で活用していける可能性を感じることができました。
なんと、本日紹介したようなNotionを書くだけでWebサイトを作るサービスが既に存在していて、
国内でもビジネスモデルになりつつあるようで、
弊社でもnotion関連事業にいつか関わることは現実的にありそうですよね。
その際には今回得た知見を活かせたり、この記事がだれかの助けになれば幸いです。
今回の技術テーマでの連載記事はこれでおしまいになります。
最後までお読みいただきありがとうございました。
前回までの記事はコチラ▽
Discussion