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.4k
Next.jsの今年一年を振り返る
hanetsuki
1
1.3k
大規模メディアにおけるNext.js とVercelのレンダリングとキャッ シュ戦略について
hanetsuki
3
2.6k
Next.jsチョットデキル!サイトの規模やページ特性に合わせた開発テクニック
hanetsuki
3
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
令和版ソフトウェアエンジニアの情報収集術 PHPカンファレンス香川2024
ysknsid25
4
870
LLM評価の落とし穴~開発者目線で気をつけるポイント~
rishigami
11
3.2k
cgroup v2 で何が変わったのか / TechFeed Experts Night #28
tenforward
2
160
複雑なビジネスルールに挑む:正確性と効率性を両立するfp-tsのチーム活用術 / Strike a balance between correctness and efficiency with fp-ts
kakehashi
5
3.5k
SWC Transformerから見るTypeScript関数記述ベストプラクティス
fujiyamaorange
1
170
社内での継続的な機械学習勉強会の開催のコツ
yudai00
2
390
The depthes of profiling Ruby - RubyKaigi 2024
osyoyu
0
140
Cloudflare WorkersがPythonに対応したので試してみた
miura55
0
190
RubyKaigi 2024 - Make Your Own Regex Engine!
makenowjust
0
140
株式会社EventHub・エンジニア採用資料
eventhub
0
2.1k
生成AIがもたらす変革 / GitHubGalaxy_CyberAgent
cyberagentdevelopers
PRO
2
110
Step by Stepで学ぶ、ADT(代数的データ型)、モナドからEffect-TSまで
leveragestech
1
2.9k
Featured
See All Featured
Design by the Numbers
sachag
274
18k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
2k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Teambox: Starting and Learning
jrom
128
8.4k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.7k
How STYLIGHT went responsive
nonsquared
92
4.8k
Web Components: a chance to create the future
zenorocha
306
41k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
21
1.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
82
45k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
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というファイルを作成することができる • ⭕ ビューとロジック分離することで、作業を分担を行うことができる。コンフリクトも発生しにく い。 • ❌
同階層にファイルを作成する為、ファイルが多くなればなるほど管理コストが発生する。 まとめ
ご静聴ありがとうございました。