Next.js in Practice

Transcript

1. Next.js App Router in Practices WebφΠτٶ࡚ Vol.20 2024.4.26 @sdaigo
2. ઃᒜ େޛ Frontend dev @sdaigo
3. Intro Next.js App Router Ͱ monolith ͳ ϑϧελοΫ ΞϓϦέʔγϣϯΛߏங͢ΔͨΊʹ ࠾༻͍ͯ͠ΔΞʔΩςΫνϟʹ͍ͭͯ • Modular and Layered architecture • Tools https://ja.next-community-docs.dev/docs/app-router Next.js App Router ͷυΩϡϝϯτͷ຋༁Λެ։͠·ͨ͠ʂ
4. . ├── LICENSE ├── README.md ├── apps │ ├── blog │ └── web ├── biome.json ├── bun.lockb ├── lefthook.yml ├── package.json ├── packages │ ├── design - system │ └── ui └── turbo.json ೚ҙͷཻ౓ͷΞϓϦέʔγϣϯ σβΠϯγεςϜʢσβΠϯτʔΫϯʣ σβΠϯγεςϜΛ࣮૷ͨ͠ Atomic ίϯϙʔωϯτ Monorepo /w Turbopack
5. packages/design-system σβΠϯτʔΫϯͷఆٛ • Panda CSS ͷ τʔΫϯఆٛू • Primitive ͳτʔΫϯͷఆٛͱɺίϯςΩετΛදͨ͠ Semantic ͳτʔΫϯΛఆٛ͢Δ • Preset (≒ theme) Λग़ྗͯ͠ packages/uiɺ apps/* ͔Β࢖༻͢Δ
7. packages/ui σβΠϯτʔΫϯΛ࢖༻ͨ͠ڞ༗ίϯϙʔωϯτ • Custom Component or Ark UI ϕʔεͷίϯϙʔωϯτ • ͜ΕҎ্ࡉ෼ԽͰ͖ͳ͍ʢͯ͠΋ҙຯ͕ͳ͍ʣ୯ҐͷίϯϙʔωϯτूʢAtomic Componentʣ • Design System ʹ͓͚Δίϯϙʔωϯτ͸ද૚తͳ΋ͷͰ͔͠ͳ͍ͷͰ෼͚ͯΔ
8. Design System accent: { DEFAULT : { value: "{colors.ultra.950}" }, inverted: { value: "{colors.white}" }, fg: { value: "{colors.ultra.50}" }, emphasized: { value: "{colors.ultra.800}" }, muted: { value: "{colors.ultra.700}" }, subtle: { value: "{colors.ultra.100}" }, disabled: { value: "{colors.ultra.200}" }, }, Component Structure and Functionality Custom Components 💅
9. apps/* ೚ҙͷཻ౓ͷΞϓϦέʔγϣϯ • ཧ۶্͸ Next ʹݶΒͣɺWeb ϑϨʔϜϫʔΫ্ʹߏங͞ΕΔΞϓϦέʔγϣϯ • ϑϨʔϜϫʔΫͷϧʔϧͱɺΞϓϦέʔγϣϯͷυϝΠϯͷ࣮૷Λ෼཭͢Δ • Next.js Ͱ͋Ε͹ɺϑΝΠϧن໿্ @… ΍ […]ɺ(…)ͳͲͷσΟϨΫτϦ͕ग़ͯ͘ΔͷͰ FW ͷ࣮૷ͷৄࡉͷதʹϏδωεϧʔϧΛॻ͖ͨ͘ͳ͍ • Next.js౎߹ͷϞδϡʔϧΛԡ͠ࠐΊΔ • ͍ͭͰ΋ Next.js ΛࣺͯΒΕΔΑ͏ʹ͓ͯ͘͠
10. src/app ├── favicon.ico ├── globals.css ├── layout.tsx ├── not - found.tsx ├── page.tsx ├── posts │ ├── [ ... slug] │ │ ├── loading.tsx │ │ └── page.tsx │ ├── loading.tsx │ └── page.tsx └── tags └── [tag] ├── loading.tsx └── page.tsx App Directory ಺͸ •Route Segment ͷఆٛ •page / layout ͳͲϑΝΠϧن໿͕͋Δ΋ͷ͚ͩ
11. src/boundary ├── posts │ ├── action │ │ ├── posts.ts │ │ └── tags.ts │ ├── domain │ │ ├── post.ts │ ├── presenter │ │ ├── post.ts │ │ └── tags.ts │ └── ui │ ├── archives │ └── featured └── shared ├── consts.ts └── ui Boundary ʹ ίϯςΩετڥք͝ͱͷϞδϡʔϧΛఆٛ͢Δ action : side-effects / server actions domain: data, calculation presenter: data transformation ui: Object Level Components
13. Bun JavaScript Runtime https://bun.sh/ • ମײϨϕϧͰૣ͍ • Vercel ͰରԠ͍ͯ͠Δ TOOLS
14. Biome Rust Ͱॻ͔Εͨ Formatter / Linter ΛؚΉπʔϧ https://biomejs.dev/ • Alt ESLint / Prettier • Opinionated • Biome ͷϧʔϧʹै͍ɺؾʹೖΒͳ͍ϧʔϧ্͚ͩॻ͖ઃఆ͢Δ TOOLS
15. { "$schema": "https: // biomejs.dev/schemas/1.6.3/schema.json", "organizeImports": { "enabled": true }, "linter": { "rules": { "recommended": true } }, "formatter": { "formatWithErrors": true, "indentStyle": "space", "lineWidth": 100 }, "javascript": { "formatter": { "arrowParentheses": "asNeeded" } } }
16. Panda CSS-in-JS https://panda-css.com/ • RSCʹରԠͨ͠ CSS-in-JS • Stitches ʹࣅͯΔͷͰݸਓతʹ࢖͍΍͍͢ • σβΠϯτʔΫϯΛఆٛͰ͖ΔͷͰɺσβΠϯγεςϜΛߏங͠΍͍͢ TOOLS
17. ts-belt FP utilities for TypeScript ReScript ʢچBuckleScriptʣ ͷ API https://mobily.github.io/ts-belt/ • Ramda + TypeScript ͕ਏ͍ • OptionɺResultɺpipe ts-pattern Bring Pattern Matching for TypeScript https://github.com/gvergnaud/ts-pattern • TSͰύλʔϯϚονϯά ™︎ TOOLS