Tweet
Tweet

Slide 1

Slide 1 text

Next.js App Router in Practices WebφΠτٶ࡚ Vol.20 2024.4.26 @sdaigo

Slide 2

Slide 2 text

ઃᒜ େޛ Frontend dev @sdaigo

Slide 3

Slide 3 text

Intro Next.js App Router Ͱ monolith ͳ ϑϧελοΫ ΞϓϦέʔγϣϯΛߏங͢ΔͨΊʹ ࠾༻͍ͯ͠ΔΞʔΩςΫνϟʹ͍ͭͯ • Modular and Layered architecture • Tools https://ja.next-community-docs.dev/docs/app-router Next.js App Router ͷυΩϡϝϯτͷ຋༁Λެ։͠·ͨ͠ʂ

Slide 4

Slide 4 text

. ├── LICENSE ├── README.md ├── apps │ ├── blog │ └── web ├── biome.json ├── bun.lockb ├── lefthook.yml ├── package.json ├── packages │ ├── design - system │ └── ui └── turbo.json ೚ҙͷཻ౓ͷΞϓϦέʔγϣϯ σβΠϯγεςϜʢσβΠϯτʔΫϯʣ σβΠϯγεςϜΛ࣮૷ͨ͠ Atomic ίϯϙʔωϯτ Monorepo /w Turbopack

Slide 5

Slide 5 text

packages/design-system σβΠϯτʔΫϯͷఆٛ • Panda CSS ͷ τʔΫϯఆٛू • Primitive ͳτʔΫϯͷఆٛͱɺίϯςΩετΛදͨ͠ Semantic ͳτʔΫϯΛఆٛ͢Δ • Preset (≒ theme) Λग़ྗͯ͠ packages/uiɺ apps/* ͔Β࢖༻͢Δ

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

packages/ui σβΠϯτʔΫϯΛ࢖༻ͨ͠ڞ༗ίϯϙʔωϯτ • Custom Component or Ark UI ϕʔεͷίϯϙʔωϯτ • ͜ΕҎ্ࡉ෼ԽͰ͖ͳ͍ʢͯ͠΋ҙຯ͕ͳ͍ʣ୯ҐͷίϯϙʔωϯτूʢAtomic Componentʣ • Design System ʹ͓͚Δίϯϙʔωϯτ͸ද૚తͳ΋ͷͰ͔͠ͳ͍ͷͰ෼͚ͯΔ

Slide 8

Slide 8 text

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 💅

Slide 9

Slide 9 text

apps/* ೚ҙͷཻ౓ͷΞϓϦέʔγϣϯ • ཧ۶্͸ Next ʹݶΒͣɺWeb ϑϨʔϜϫʔΫ্ʹߏங͞ΕΔΞϓϦέʔγϣϯ • ϑϨʔϜϫʔΫͷϧʔϧͱɺΞϓϦέʔγϣϯͷυϝΠϯͷ࣮૷Λ෼཭͢Δ • Next.js Ͱ͋Ε͹ɺϑΝΠϧن໿্ @… ΍ […]ɺ(…)ͳͲͷσΟϨΫτϦ͕ग़ͯ͘ΔͷͰ FW ͷ࣮૷ͷৄࡉͷதʹϏδωεϧʔϧΛॻ͖ͨ͘ͳ͍ • Next.js౎߹ͷϞδϡʔϧΛԡ͠ࠐΊΔ • ͍ͭͰ΋ Next.js ΛࣺͯΒΕΔΑ͏ʹ͓ͯ͘͠

Slide 10

Slide 10 text

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 ͳͲϑΝΠϧن໿͕͋Δ΋ͷ͚ͩ

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Bun JavaScript Runtime https://bun.sh/ • ମײϨϕϧͰૣ͍ • Vercel ͰରԠ͍ͯ͠Δ TOOLS

Slide 14

Slide 14 text

Biome Rust Ͱॻ͔Εͨ Formatter / Linter ΛؚΉπʔϧ https://biomejs.dev/ • Alt ESLint / Prettier • Opinionated • Biome ͷϧʔϧʹै͍ɺؾʹೖΒͳ͍ϧʔϧ্͚ͩॻ͖ઃఆ͢Δ TOOLS

Slide 15

Slide 15 text

{ "$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" } } }

Slide 16

Slide 16 text

Panda CSS-in-JS https://panda-css.com/ • RSCʹରԠͨ͠ CSS-in-JS • Stitches ʹࣅͯΔͷͰݸਓతʹ࢖͍΍͍͢ • σβΠϯτʔΫϯΛఆٛͰ͖ΔͷͰɺσβΠϯγεςϜΛߏங͠΍͍͢ TOOLS

Slide 17

Slide 17 text

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