Next.jsで整える。デザインとロジックの分離

Transcript

1. Next.jsで整える。デザインとロジックの分離 Page Extensionsの活用 2021/09/30 by hanetsuki

2. hanetsuki • 業界4年目のフロントエンドエンジニア • 最初はHTMLとかCSSとか触ってた • 最近は Gatsby とか Next

   とかすごく触ってる • 最近の悩みはスタイル実装する上での技術選定 簡単に自己紹介

3. Next.jsちょっと触ったことあるよ！って人向けになっているかもしれません。すみません

4. 経緯

5. • メディアサイトを作成することになった ◦ デザイナーコーダー × 1人 ◦ フロントエンド × 1人（ワイ）

   経緯

6. • メディアサイトを作成することになった ◦ デザイナーコーダー × 1人 ◦ フロントエンド × 1人（ワイ）

   • Next.jsとmicroCMSでSSGしてvercelにデプロイ ◦ 私的、Jamstack王道構成ですね 経緯

7. • メディアサイトを作成することになった ◦ デザイナーコーダー × 1人 ◦ フロントエンド × 1人（ワイ）

   • Next.jsとmicroCMSでSSGしてvercelにデプロイ ◦ 私的、Jamstack王道構成ですね • 「Jsわからんです」「抵抗感あります」 ◦ それもそうだよね〜 経緯

8. getStaticProps getStaticPaths CSS NextPage 一つのファイルに色々な処理が記載されていて見通しが悪い ...

9. getStaticProps getStaticPaths CSS NextPage 一つのファイルに色々な処理が記載されていて見通しが悪い ... パンくずリスト ページネーション

10. getStaticPaths getStaticProps NextPage CSS なんらかの方法で・いい感じに・分離できたらいいなと思いました ^^

11. • デザイナーコーダーが触るViewの部分 • フロントエンドが触るロジックの部分 • これを目指していきます^^ 経緯

12. Page Extensionsの活用

13. https://nextjs.org/docs/api-reference/next.config.js/custom-page-extensions • pages/ 配下のページとして読み込みされるファイルの拡張子などをカスタマイズすることがで きるオプション。next.config.js にオプションとして渡すことができる。 • これにpage.tsxという設定を加えました。 ◦ index.page.tsx,

    _app.page.tsx • 限定的なファイルのみページとして読み込むようになりました。 Page Extensionsの活用

14. pages/blog/[contentId].page.tsx View Logic Logic

15. pages/blog/[contentId].page.tsx View Logic Logic ここからLogicを外に出します。

16. • .page.tsと同じ階層に.hook.tsを作成します。 ◦ page/index.page.tsx だった場合、pages/index.hook.ts ◦ page/blog/[contentId].page.tsx だった場合、pages/blog/[contentId].hook.ts ◦ こんな感じ^^

    • 先程の page/blog/[contentId].page.tsx を例に .hook.ts にロジックを移し替えてみます。 ロジックの外出し.hook.tsの作成

17. pages/blog/[contentId].hook.tsx

18. pages/blog/[contentId].page.tsx ※ getStaticPropsとgetStaticPathsは、エントリーファイルである .page.tsxで import/export を実施必要がありま す。

19. • pageExtensionsでページとなるファイルの拡張子を制限することができる ◦ そのおかげで同階層に.hook.tsというファイルを作成することができる • ⭕ ビューとロジック分離することで、作業を分担を行うことができる。コンフリクトも発生しにく い。 • ❌

    同階層にファイルを作成する為、ファイルが多くなればなるほど管理コストが発生する。 まとめ

20. ご静聴ありがとうございました。