Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Next.jsで整える。デザインとロジックの分離
Search
hanetsuki
September 30, 2021
Technology
5
4.1k
Next.jsで整える。デザインとロジックの分離
Next.jsのPage Extensionsを活用してビューとロジックをを分離したプロジェクト運用について考えた事まとめです。
hanetsuki
September 30, 2021
Tweet
Share
More Decks by hanetsuki
See All by hanetsuki
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.5k
Next.jsの今年一年を振り返る
hanetsuki
1
1.3k
大規模メディアにおけるNext.js とVercelのレンダリングとキャッ シュ戦略について
hanetsuki
3
2.6k
Next.jsチョットデキル!サイトの規模やページ特性に合わせた開発テクニック
hanetsuki
4
2.1k
Jamstackで事前に欲しいパーツ群を洗い出す
hanetsuki
1
310
2022年最新版 GatsbyJS + TypeScript + microCMS でブログを作る。
hanetsuki
1
11k
Next.jsで静的サイトを作成時 よく使っているライブラリまとめ
hanetsuki
5
17k
Other Decks in Technology
See All in Technology
ロリポップ! for Gamersの立ち上げ/lolipop for gamers launch
takumakume
0
620
第34回 中国地方DB勉強会 in 広島_Why DBRE?
tomomo
7
1.7k
【OpsJAWS】踏み台サーバーって何がうれしいんだっけ?
hssh2_bin
8
3.6k
はてなのSRE組織2024 / Road to SRE NEXT@福岡
cohalz
1
550
上手く活用すればコスト削減につながる、ONTAPの Temperature Sensitive Storage Efficiency (TSSE) の紹介
non97
0
220
SONiCを自前でビルドする話
imasaruoki
1
560
スタートアップが AWS FTR を取得するべき理由
izzii
0
170
Custom Query で監視が捗った話 / Monitoring with Custom Query
akitok_
0
160
BigQuery データ キャンバスでデータモデリングしてみた / I tried data modeling with BigQuery Data Canvas
sansan_randd
4
650
GitHub Copilotと快適なユニットテストコード作成生活
bun913
8
3.5k
HeadlessなUIライブラリを利用する価値
plaidtech
PRO
10
2.6k
オープンソースのロボットソフトウェア「ROS」で地図作成を試してみた
miura55
0
130
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
The Invisible Customer
myddelton
114
12k
Writing Fast Ruby
sferik
623
60k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
GraphQLとの向き合い方2022年版
quramy
33
13k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Web Components: a chance to create the future
zenorocha
306
41k
The Cost Of JavaScript in 2023
addyosmani
22
4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
136
41k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
14
8.4k
Transcript
Next.jsで整える。デザインとロジックの分離 Page Extensionsの活用 2021/09/30 by hanetsuki
hanetsuki • 業界4年目のフロントエンドエンジニア • 最初はHTMLとかCSSとか触ってた • 最近は Gatsby とか Next
とかすごく触ってる • 最近の悩みはスタイル実装する上での技術選定 簡単に自己紹介
Next.jsちょっと触ったことあるよ!って人向けになっているかもしれません。すみません
経緯
• メディアサイトを作成することになった ◦ デザイナーコーダー × 1人 ◦ フロントエンド × 1人(ワイ)
経緯
• メディアサイトを作成することになった ◦ デザイナーコーダー × 1人 ◦ フロントエンド × 1人(ワイ)
• Next.jsとmicroCMSでSSGしてvercelにデプロイ ◦ 私的、Jamstack王道構成ですね 経緯
• メディアサイトを作成することになった ◦ デザイナーコーダー × 1人 ◦ フロントエンド × 1人(ワイ)
• Next.jsとmicroCMSでSSGしてvercelにデプロイ ◦ 私的、Jamstack王道構成ですね • 「Jsわからんです」「抵抗感あります」 ◦ それもそうだよね〜 経緯
getStaticProps getStaticPaths CSS NextPage 一つのファイルに色々な処理が記載されていて見通しが悪い ...
getStaticProps getStaticPaths CSS NextPage 一つのファイルに色々な処理が記載されていて見通しが悪い ... パンくずリスト ページネーション
getStaticPaths getStaticProps NextPage CSS なんらかの方法で・いい感じに・分離できたらいいなと思いました ^^
• デザイナーコーダーが触るViewの部分 • フロントエンドが触るロジックの部分 • これを目指していきます^^ 経緯
Page Extensionsの活用
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の活用
pages/blog/[contentId].page.tsx View Logic Logic
pages/blog/[contentId].page.tsx View Logic Logic ここからLogicを外に出します。
• .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の作成
pages/blog/[contentId].hook.tsx
pages/blog/[contentId].page.tsx ※ getStaticPropsとgetStaticPathsは、エントリーファイルである .page.tsxで import/export を実施必要がありま す。
• pageExtensionsでページとなるファイルの拡張子を制限することができる ◦ そのおかげで同階層に.hook.tsというファイルを作成することができる • ⭕ ビューとロジック分離することで、作業を分担を行うことができる。コンフリクトも発生しにく い。 • ❌
同階層にファイルを作成する為、ファイルが多くなればなるほど管理コストが発生する。 まとめ
ご静聴ありがとうございました。