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.5k
Next.jsで整える。デザインとロジックの分離
Next.jsのPage Extensionsを活用してビューとロジックをを分離したプロジェクト運用について考えた事まとめです。
hanetsuki
September 30, 2021
Tweet
Share
More Decks by hanetsuki
See All by hanetsuki
AIを用いて実践してきた開発方法について
hanetsuki
1
48
ソフトウェア開発ナニモワカラナイ
hanetsuki
0
180
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
2.1k
Next.jsの今年一年を振り返る
hanetsuki
1
1.4k
大規模メディアにおけるNext.js とVercelのレンダリングとキャッ シュ戦略について
hanetsuki
4
3.2k
Next.jsチョットデキル!サイトの規模やページ特性に合わせた開発テクニック
hanetsuki
3
2.3k
Jamstackで事前に欲しいパーツ群を洗い出す
hanetsuki
1
400
2022年最新版 GatsbyJS + TypeScript + microCMS でブログを作る。
hanetsuki
1
12k
Next.jsで静的サイトを作成時 よく使っているライブラリまとめ
hanetsuki
5
18k
Other Decks in Technology
See All in Technology
AIエージェントで90秒の広告動画を制作!台本・音声・映像・編集をつなぐAWS最新アーキテクチャの実践
nasuvitz
3
300
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.8k
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
110
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
210
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
980
未経験者・初心者に贈る!40分でわかるAndroidアプリ開発の今と大事なポイント
operando
5
730
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.5k
slog.Handlerのよくある実装ミス
sakiengineer
4
410
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
kaz3284
1
210
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
470
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
860
【NoMapsTECH 2025】AI Edge Computing Workshop
akit37
0
220
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
850
Large-scale JavaScript Application Architecture
addyosmani
513
110k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
A better future with KSS
kneath
239
17k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
4 Signs Your Business is Dying
shpigford
184
22k
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というファイルを作成することができる • ⭕ ビューとロジック分離することで、作業を分担を行うことができる。コンフリクトも発生しにく い。 • ❌
同階層にファイルを作成する為、ファイルが多くなればなるほど管理コストが発生する。 まとめ
ご静聴ありがとうございました。