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
150
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
2k
Next.jsの今年一年を振り返る
hanetsuki
1
1.4k
大規模メディアにおけるNext.js とVercelのレンダリングとキャッ シュ戦略について
hanetsuki
4
3.1k
Next.jsチョットデキル!サイトの規模やページ特性に合わせた開発テクニック
hanetsuki
3
2.3k
Jamstackで事前に欲しいパーツ群を洗い出す
hanetsuki
1
380
2022年最新版 GatsbyJS + TypeScript + microCMS でブログを作る。
hanetsuki
1
12k
Next.jsで静的サイトを作成時 よく使っているライブラリまとめ
hanetsuki
5
18k
Other Decks in Technology
See All in Technology
ブラウザのレガシー・独自機能を愛でる-Firefoxの脆弱性4選- / Browser Crash Club #1
masatokinugawa
1
460
SREからゼロイチプロダクト開発へ ー越境する打席の立ち方と期待への応え方ー / Product Engineering Night #8
itkq
2
540
“パスワードレス認証への道" ユーザー認証の変遷とパスキーの関係
ritou
1
570
3月のAWSアップデートを5分間でざっくりと!
kubomasataka
0
120
Terraform Cloudで始めるおひとりさまOrganizationsのすゝめ
handy
2
170
ここはMCPの夜明けまえ
nwiizo
2
1.7k
LLM とプロンプトエンジニアリング/チューターをビルドする / LLM, Prompt Engineering and Building Tutors
ks91
PRO
1
250
AIコーディングの最前線 〜活用のコツと課題〜
pharma_x_tech
1
920
更新系と状態
uhyo
5
1.1k
Amazon S3 Tables + Amazon Athena / Apache Iceberg
okaru
0
270
アセスメントで紐解く、10Xのデータマネジメントの軌跡
10xinc
1
420
SnowflakeとDatabricks両方でRAGを構築してみた
kameitomohiro
1
260
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
23
2.6k
Building Adaptive Systems
keathley
41
2.5k
Product Roadmaps are Hard
iamctodd
PRO
52
11k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Navigating Team Friction
lara
184
15k
4 Signs Your Business is Dying
shpigford
183
22k
The Language of Interfaces
destraynor
157
24k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2k
[RailsConf 2023] Rails as a piece of cake
palkan
54
5.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というファイルを作成することができる • ⭕ ビューとロジック分離することで、作業を分担を行うことができる。コンフリクトも発生しにく い。 • ❌
同階層にファイルを作成する為、ファイルが多くなればなるほど管理コストが発生する。 まとめ
ご静聴ありがとうございました。