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
320
2022年最新版 GatsbyJS + TypeScript + microCMS でブログを作る。
hanetsuki
1
11k
Next.jsで静的サイトを作成時 よく使っているライブラリまとめ
hanetsuki
5
17k
Other Decks in Technology
See All in Technology
スマートロック開発におけるSLI/SLOを用いた解錠体験の改善 / Improving the unlocking experience using SLI/SLO in smart lock development
bitkey
PRO
2
120
出前館アプリにおける Flutterアプリ設計
demaecan
1
190
入門 電気通信事業者
kurochan
9
4.3k
actionlint の Linter 設計
rhysd
5
560
asoview! Company Deck for engineer
asoviewinc
0
35k
20240530_洲崎 Amazon Connectの概要と活用パターン
suzakiyoshito
0
190
タイパ重視×アウトプット駆動ではじめるAWS 〜認定資格とコミュニティの先で考えるAWSの学び方〜
maimyyym
2
140
10分でわかる株式会社ログラス − エンジニア向け会社説明資料 / Loglass in 10 min for Engineers
loglass2019
3
14k
Cleanup handling in Go / Go Conference 2024
k1low
5
1.9k
20240530_IBMTechXchangeDojo_いまからでも遅くない_OpenShiftでアプリをHTTPSで公開してみる
ttykwn
0
140
セキュリティ研修 〜テクニカルパート〜(サイバーエージェント新卒研修2024)
cyberagentdevelopers
PRO
2
210
MySQL 8.4 LTS が あらわれた
yoku0825
PRO
1
210
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
127
32k
[RailsConf 2023] Rails as a piece of cake
palkan
31
4.2k
What's new in Ruby 2.0
geeforr
338
31k
For a Future-Friendly Web
brad_frost
172
9.1k
Product Roadmaps are Hard
iamctodd
46
9.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Done Done
chrislema
178
15k
Mobile First: as difficult as doing things right
swwweet
218
8.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
15
8.5k
Visualization
eitanlees
137
14k
The Brand Is Dead. Long Live the Brand.
mthomps
51
33k
Building Adaptive Systems
keathley
33
1.9k
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というファイルを作成することができる • ⭕ ビューとロジック分離することで、作業を分担を行うことができる。コンフリクトも発生しにく い。 • ❌
同階層にファイルを作成する為、ファイルが多くなればなるほど管理コストが発生する。 まとめ
ご静聴ありがとうございました。