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.4k
Next.jsで整える。デザインとロジックの分離
Next.jsのPage Extensionsを活用してビューとロジックをを分離したプロジェクト運用について考えた事まとめです。
hanetsuki
September 30, 2021
Tweet
Share
More Decks by hanetsuki
See All by hanetsuki
ソフトウェア開発ナニモワカラナイ
hanetsuki
0
110
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.9k
Next.jsの今年一年を振り返る
hanetsuki
1
1.4k
大規模メディアにおけるNext.js とVercelのレンダリングとキャッ シュ戦略について
hanetsuki
4
3k
Next.jsチョットデキル!サイトの規模やページ特性に合わせた開発テクニック
hanetsuki
3
2.2k
Jamstackで事前に欲しいパーツ群を洗い出す
hanetsuki
1
360
2022年最新版 GatsbyJS + TypeScript + microCMS でブログを作る。
hanetsuki
1
12k
Next.jsで静的サイトを作成時 よく使っているライブラリまとめ
hanetsuki
5
18k
Other Decks in Technology
See All in Technology
なぜfreeeはハブ・アンド・スポーク型の データメッシュアーキテクチャにチャレンジするのか?
shinichiro_joya
2
470
生成AIのビジネス活用
seosoft
0
110
2025年のARグラスの潮流
kotauchisunsun
0
790
WantedlyでのKotlin Multiplatformの導入と課題 / Kotlin Multiplatform Implementation and Challenges at Wantedly
kubode
0
250
2024年活動報告会(人材育成推進WG・ビジネスサブWG) / 20250114-OIDF-J-EduWG-BizSWG
oidfj
0
230
re:Invent2024 KeynoteのAmazon Q Developer考察
yusukeshimizu
1
150
Git scrapingで始める継続的なデータ追跡 / Git Scraping
ohbarye
5
490
生成AI × 旅行 LLMを活用した旅行プラン生成・チャットボット
kominet_ava
0
160
信頼されるためにやったこと、 やらなかったこと。/What we did to be trusted, What we did not do.
bitkey
PRO
0
2.2k
FODにおけるホーム画面編成のレコメンド
watarukudo
PRO
2
280
AWS re:Invent 2024 recap in 20min / JAWSUG 千葉 2025.1.14
shimy
1
100
デジタルアイデンティティ人材育成推進ワーキンググループ 翻訳サブワーキンググループ 活動報告 / 20250114-OIDF-J-EduWG-TranslationSWG
oidfj
0
540
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Facilitating Awesome Meetings
lara
51
6.2k
The Cult of Friendly URLs
andyhume
78
6.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
RailsConf 2023
tenderlove
29
970
How GitHub (no longer) Works
holman
312
140k
Adopting Sorbet at Scale
ufuk
74
9.2k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Code Review Best Practice
trishagee
65
17k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
What's in a price? How to price your products and services
michaelherold
244
12k
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というファイルを作成することができる • ⭕ ビューとロジック分離することで、作業を分担を行うことができる。コンフリクトも発生しにく い。 • ❌
同階層にファイルを作成する為、ファイルが多くなればなるほど管理コストが発生する。 まとめ
ご静聴ありがとうございました。