Next.js App Routerã«ãŠã‘ã‚‹è¨è¨ˆã‚„ベストプラクティスをã€ç†è€…ãªã‚Šã«ã¾ã¨ã‚ã¾ã—ãŸã€‚
Next.jsã®è€ƒãˆæ–¹
Next.js App Routerã«ãŠã‘ã‚‹è¨è¨ˆã‚„ベストプラクティスをã€ç†è€…ãªã‚Šã«ã¾ã¨ã‚ã¾ã—ãŸã€‚
Next.js + TypeScript + Tailwind CSS ã®é–‹ç™ºç’°å¢ƒã‚’ã§ãã‚‹ã ã‘ä¸å¯§ã«æ§‹ç¯‰ã™ã‚‹ã€2024年】
ã¯ã˜ã‚㫠最近ã€Next.jsã€TypeScriptã€Tailwind CSSを使ã£ã¦æŠ€è¡“ブãƒã‚°ã‚’ç«‹ã¡ä¸Šã’ã¾ã—ãŸã€‚（ã¾ã ã‚ã¾ã‚Šæ›´æ–°ã¯é€²ã‚“ã§ã„ã¾ã›ã‚“ãŒâ€¦ï¼‰ ã“ã®ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã‚’通ã˜ã¦æ§‹ç¯‰ã—ãŸé–‹ç™ºç’°å¢ƒãŒã‚ã‚Šã¨å¿«é©ã ã£ãŸã®ã§ã€èª°ã‹ã®å‚考ã«ãªã‚‹ã‹ã‚‚ã—ã‚Œãªã„ã¨è¨˜äº‹ã‚’書ã„ã¦ã¿ã‚‹ã“ã¨ã«ã—ã¾ã—ãŸã€‚ ã§ãã‚‹é™ã‚Šã‚ã‹ã‚Šã‚„ã™ã詳細ãªèª¬æ˜Žã‚’心ãŒã‘ã¾ã—ãŸãŒã€ãã®çµæžœã€è¨˜äº‹ã®ãƒœãƒªãƒ¥ãƒ¼ãƒ ãŒå¤§ãããªã£ã¦ã—ã¾ã„ã¾ã—ãŸã€‚é•·æ–‡ã§ã™ãŒã€èˆˆå‘³ã®ã‚ã‚‹æ–¹ã¯ãœã²èªã‚“ã§ã¿ã¦ãã ã•ã„🙠ã¾ãŸã€ã“ã®è¨˜äº‹å†…ã§ç´¹ä»‹ã—ãŸå†…容をセットアップã—ãŸãƒªãƒã‚¸ãƒˆãƒªã‚’公開ã—ã¦ã„ã¾ã™ã€‚ Next.jsã®ãƒœã‚¤ãƒ©ãƒ¼ãƒ—レートã¨ã—ã¦æ´»ç”¨å¯èƒ½ã§ã™ã®ã§ã€èˆˆå‘³ã®ã‚ã‚‹æ–¹ã¯ãœã²è¦—ã„ã¦ã¿ã¦ãã ã•ã„。
個人開発ã§å‚考ã«ãªã‚‹Next.jsリãƒã‚¸ãƒˆãƒª10é¸
OpenStatus - ステータスページ App Router Turborepo Drizzle Clerk tRPC Tailwind shadcn/ui LLM Report - OpenAI モニタリング App Router Prisma NextAuth shadcn/ui Stripe Dub - URL çŸç¸® App Router Turborepo Prisma NextAuth Tailwind Stripe slug - URL çŸç¸® Prisma NextAuth tRPC Tailwind Cal.com - 日程調整 Turborepo Prisma NextAuth tRPC Tailwind Taxonomy - ブãƒã‚° App Router Prisma NextAuth Tailwind Rowy - ãƒãƒ¼ã‚³ãƒ¼ãƒ‰ GUI Firebase Dorf -
WSL2環境ã§Next.jsã«å…¥é–€ã—ã¦ã¿ãŸ | DevelopersIO
ã—ã°ãŸã§ã™ã€‚ ãµã¨AWS謹製ã®Cloudscapeを使ã£ãŸã‚µã‚¤ãƒˆã‚’作ã£ã¦ã¿ãŸããªã‚Šã€ãã®ãŸã‚ã«ã¾ãšã¯Reactã¨Next.jsã‚’å¦ã‚“ã§ã¿ã‚‹ã“ã¨ã«ã—ã¾ã—ãŸã€‚ ç§ã¯æ™®æ®µWindows環境を利用ã—ã¦ãŠã‚ŠWSL2上ã§Next.jsを実行ã™ã‚‹ãŸã‚ã®ç’°å¢ƒã‚’作ã£ã¦ã¿ãŸã®ã§ã™ãŒã€ã“ã‚Œã ã‘ã§ã‚‚地味ã«ãƒãƒžã£ãŸã®ã§ã“ã®è¨˜äº‹ã§å…±æœ‰ã—ãŸã„ã¨æ€ã„ã¾ã™ã€‚ 検証環境 本記事ã®å†…容ã¯ç§ã®æ™®æ®µã®é–‹ç™ºæ©Ÿ(Windows 10 Pro)ã®WSL2環境(Ubuntu 20.04)ã§è©¦ã—ã¦ã„ã¾ã™ã€‚ Ubuntu 22.04ã§ãªãã¦20.04ãªã®ã¯22.04環境を普段ã®æ¥å‹™ã§ä½¿ã£ã¦ã„ã‚‹ãŸã‚é¿ã‘ãŸã®ãŒç†ç”±ã§ã™ã€‚本記事ã®å†…容ã§OSä¾å˜ã®éƒ¨åˆ†ã¯ç„¡ã„ã¨æ€ã„ã¾ã™ã€‚ ホストå´ç’°å¢ƒ 64 bit版 Windows 10 Professional 21H1 Visual Studio Code 1.72.2をインストール済㿠WSL環境 Ubuntu
Next.js + Vercel + Supabase を用ã„ãŸé«˜é€Ÿã‚¢ãƒ—リ開発 - RAKUS Developers Blog | ラクス エンジニアブãƒã‚°
ã“ã‚“ã«ã¡ã¯ï¼ãƒ©ã‚¯ã‚¹å…¥ç¤¾ï¼‘å¹´ç›®ã®koki_matsuraã§ã™ã€‚ 本日ã¯ã€Next.jsã¨Vercelã€Supabaseを用ã„ã¦ç°¡å˜ãªã‚¢ãƒ—リを高速ã§é–‹ç™ºã™ã‚‹æ‰‹é †ã«ã¤ã„ã¦ãŠè©±ã—ã§ãã‚Œã°ã¨æ€ã„ã¾ã™ã€‚ アジェンダã¯ä»¥ä¸‹ã®é€šã‚Šã§ã™ã€‚ Next.jsã¨ã¯ Reactã¨Next.jsã®é•ã„ Next.jsã®ç‰¹å¾´ Vercelã¨ã¯ Supabaseã¨ã¯ ToDoã‚¢ãƒ—ãƒªä½œæˆ Supabaseã«ãƒ‡ãƒ¼ã‚¿ãƒ™ãƒ¼ã‚¹ã‚’ç”¨æ„ Vercelã§Next.jsプãƒã‚¸ã‚§ã‚¯ãƒˆã‚’作æˆãƒ»ãƒ‡ãƒ—ãƒã‚¤ãƒ»GitHubé€£æº Vercelã¨Supabaseã®é€£æº GitHubã‹ã‚‰ã‚¯ãƒãƒ¼ãƒ³ Vercelã‹ã‚‰ç’°å¢ƒå¤‰æ•°ã‚’å–å¾— Supabaseã®ãƒ‡ãƒ¼ã‚¿ãƒ™ãƒ¼ã‚¹ã«æŽ¥ç¶š コード編集 終ã‚ã‚Šã« å‚考文献 Next.jsã¨ã¯ Next.jsã¯Reactベースã®ã‚¢ãƒ—リケーションフレームワークã§ã™ã€‚ å…¬å¼ã‚µã‚¤ãƒˆã§ã¯Next.jsã¨ã¯Reactを用ã„ãŸWebアプリ開発ã§ç”Ÿ
オープンソースã§è©±é¡Œã®BaaS「Supabaseã€ã‚’使ã£ã¦ã¿ãŸ | DevelopersIO
ãã®ä»–詳細ã®æ–™é‡‘プランページã¯ã“ã¡ã‚‰ 今回ã¯ãƒ›ãƒ“ー用途ã¨ãªã£ã¦ã„ã‚‹Freeプランを使ã„ã¾ã™ã€‚ç„¡æ–™ã§ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã‚’2ã¤ä½œã‚‹ã“ã¨ãŒã§ãã¾ã™ãŒã€APIã‚’1週間未使用ã®å ´åˆã¯ãƒ‡ãƒ¼ã‚¿ãƒ™ãƒ¼ã‚¹ãŒä¸€æ™‚åœæ¢ã¨ãªã‚‹ã‚ˆã†ã§å†é–‹ã™ã‚‹å ´åˆã¯ãƒ€ãƒƒã‚·ãƒ¥ãƒœãƒ¼ãƒ‰ã‹ã‚‰èµ·å‹•ã—ç›´ã™å¿…è¦ãŒã‚るよã†ã§ã™ã€‚ サービスã¸ã®ç™»éŒ² ã§ã¯ã€æ—©é€ŸSupabaseã®ã‚µãƒ¼ãƒ“スã«ç™»éŒ²ã‚’è¡Œã£ã¦ã„ãã¾ã™ã€‚ Supabase.io Supabase.ioã¸ã®ç™»éŒ²ã¯GitHubアカウントを利用ã™ã‚‹ã‚ˆã†ã§ã™ã€‚ 「New Projectã€ã‹ã‚‰æ–°è¦ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã‚’作æˆã—ã¾ã™ã€‚ プãƒã‚¸ã‚§ã‚¯ãƒˆåã¨ãƒ‡ãƒ¼ã‚¿ãƒ™ãƒ¼ã‚¹ã®ãƒ‘スワードã€ãƒªãƒ¼ã‚¸ãƒ§ãƒ³ã‚’指定ã—ã¾ã™ã€‚今回ã¯ã€ŒTokyoã€ãƒªãƒ¼ã‚¸ãƒ§ãƒ³ã‚’é¸æŠžã—ã¾ã—ãŸã€‚ 「Create new projectã€ã‚’押下後ã€æ•°åˆ†å¾…ã¤ã¨ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆãŒä½œæˆã•ã‚Œã¾ã™ã€‚ 完了後ã«ç”»é¢ã«è¡¨ç¤ºã•ã‚Œã‚‹Project API keyã¨URLを後ã»ã©åˆ©ç”¨ã™ã‚‹ã®ã§ãƒ¡ãƒ¢ã—ã¦
Next.js+microCMS+Vercelé¢ç™½ã„ - ゆーã™ã‘ã¹ãƒ¼æ—¥è¨˜
Next.js 㨠microCMS 㨠Vercel ãŒé¢ç™½ã„。ãã‚Œãžã‚Œé¢ç™½ã„ã—ã€çµ„ã¿åˆã‚ã›ã‚‹ã¨ã•ã‚‰ã«é¢ç™½ã„。ãªã«ã›ã€ãƒ¡ãƒ‡ã‚£ã‚¢ã‚µã‚¤ãƒˆãŒãƒ‡ãƒ—ãƒã‚¤ã‚‚å«ã‚㦠2 時間ã§å‡ºæ¥ã‚‹ã€‚ Next.js + microCMS + Vercel ã™ã”ã„ãªã€‚メディアサイト（ä¸èº«ã‚¹ãƒƒã‚«ã‚¹ã‚«ã ã‘ã©ï¼‰ãŒã‚‚ã®ã® 2 時間ã§ãƒ‡ãƒ—ãƒã‚¤ã¾ã§ã§ããŸã€‚ https://twitter.com/yusukebe/status/1435708770705760256 ã¨ã„ã†ã“ã¨ã§ã€ãƒ¡ãƒ‡ã‚£ã‚¢ã‚µã‚¤ãƒˆã‚’作りãªãŒã‚‰ã€Next.js 㨠microCMS 㨠Vercel ã®é¢ç™½ã•ã‚’ã¾ã¨ã‚る。 2 時間ã§ä½œã‚‹ãƒ¡ãƒ‡ã‚£ã‚¢ã‚µã‚¤ãƒˆ 例ã¨ã—ã¦ã€Œãƒ©ãƒ¼ãƒ¡ãƒ³ã¾ã¨ã‚ï¼ã€ã¨ã„ã†ãƒ¡ãƒ‡ã‚£ã‚¢ã‚µã‚¤ãƒˆã‚’作ã£ã¦ã¿ã‚‹ã€‚ã“ã®ã‚µã‚¤ãƒˆã«ã¯ ラーメン屋 ラーメン屋ã®ã¾ã¨ã‚記事 ã® 2 ã¤ã®ç¨®é¡žã®ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ãŒã‚る。「ラーメン屋ã€ãŒã€Œåå‰ã€ã€Œå ´æ‰€ã€ã€Œãƒ©ãƒ¼ãƒ¡ãƒ³å†™çœŸã€ã¨ã„ã†ãƒ—ãƒãƒ‘ティをæŒ
Next.jsã«ãŠã‘ã‚‹SSG（é™çš„サイト生æˆï¼‰ã¨ISRã«ã¤ã„ã¦ï¼ˆè‡ªåˆ†ã®ï¼‰é™ç•Œã¾ã§ä¸å¯§ã«èª¬æ˜Žã™ã‚‹ - Qiita
ã“ã®è¨˜äº‹ã§ã¯ã€Web アプリケーションã«ãŠã‘るデータå–得（データフェッãƒãƒ³ã‚°ï¼‰ã‚„レンダリングã«é–¢ã™ã‚‹å„手法ã«ã¤ã„ã¦æ¯”較・整ç†ã™ã‚‹ã“ã¨ã‚’目的ã¨ã—ã¦ã€ç‰¹ã«æœ€è¿‘注目度ãŒé«˜ã¾ã£ã¦ã„ã‚‹ Next.js ã«ãŠã‘ã‚‹ SSG（é™çš„サイト生æˆï¼‰ã‚„ ISR（インクリメンタルé™çš„å†ç”Ÿæˆï¼‰ã€ãれ以外ã®æ‰‹æ³•ï¼ˆSSRã€CSR ç‰ï¼‰ã‚’具体的ãªãƒ†ãƒ¼ãƒžã¨ã—ã¦ãŠè©±ã—ã—ã¾ã™ã€‚ Twitter ã‚‚ã‚„ã£ã¦ã„ã‚‹ã®ã§ã‚ˆã‹ã£ãŸã‚‰ãƒ•ã‚©ãƒãƒ¼ãŠããŒã„ã—ã¾ã™ï¼ @_thesugar_ 記事内ã®è§£èª¬ã¯æ£ç¢ºæ€§ã‚’期ã™ã‚ˆã†æ³¨æ„を払ã£ã¦ãŠã‚Šã¾ã™ãŒã€èª¤ã£ã¦ã„る部分ãªã©ãŒã”ã–ã„ã¾ã—ãŸã‚‰ã‚³ãƒ¡ãƒ³ãƒˆæ¬„ã‚„ Twitter ç‰ã§ã”指摘ãã ã•ã„ ã¯ã˜ã‚ã« Web アプリケーションを作るã¨ãã€ãƒ¬ã‚¹ãƒãƒ³ã‚¹ã®é€Ÿã•ã‚’ã¯ã˜ã‚ã¨ã—ãŸãƒ‘フォーマンスã®å•é¡Œã¯é–‹ç™ºè€…ã«ã¨ã£ã¦å¤§ããªé–¢å¿ƒäº‹ã¨ãªã‚Šã¾ã™ã€‚ ãŸã¨ãˆã°ã€æœ€è¿‘ã§ã¯ Google ㌠Core Web Vitals ã¨ã„ㆠWeb ã®ãƒ‘
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}