키모스토리

Next.js(App Router)에서 Route Group는 폴더 이름을 괄호로 감싼 (groupName) 형태로 만들고, 그 폴더는 정리용(조직화용) 이라서 URL 경로에 포함되지 않게 하는 규칙이에요. Next.js+11) 기본 규칙: (폴더명)은 URL에 안 들어감예를 들어:app/ (site)/ login/ page.tsx위 구조의 실제 URL은 /login 입니다. (site)는 라우트 URL 세그먼트로 취급되지 않아요. Next.js+1Route group 이름은 “의미”가 있는 게 아니라 그냥 정리용 이름이에요. Next.js2) Route Group을 왜 쓰나? (대표 3가지)A. 라우트를 팀/기능/섹션별로 정리예: (site) / (partner) / (api) 처럼 “..

Next.js(App Router)에서 private folder는 폴더 이름 앞에 _(언더스코어) 를 붙여서 라우팅에서 제외시키는 규칙이에요. 즉, app 아래에 있어도 URL 세그먼트/라우트로 취급되지 않는 “내부용 폴더” 로 만들 수 있습니다. Next.js어떻게 쓰나규칙: app/.../_folderName/...예시:app/ blog/ page.tsx // /blog _components/ Post.tsx // 라우트 아님(내부 컴포넌트) _lib/ data.ts // 라우트 아님(유틸/데이터) 이렇게 하면 _components, _lib 아래 파일들은 라우트가 절대 생성되지 않고, 필요한 곳에서 impor..

1) 호출 모델 차이Client fetch브라우저에서 JS로 fetch('/api/...')서버에는 HTTP API(Route Handler) 가 있어야 함 (app/api/.../route.ts)결과(JSON)를 받아서 useState로 화면 갱신흐름Client(React) → HTTP 요청 → API 응답(JSON) → Client 렌더 Server Action브라우저 폼 제출을 Next가 서버 함수로 직접 연결별도 API 엔드포인트가 없어도 됨보통 redirect()로 URL/상태를 유지하거나, useActionState로 결과를 받음흐름Client(Form submit) → Server Action 실행 → (redirect / re-render / revalidate) → UI 갱신 2) 코드 ..

Next.js App Router에서 페이지/레이아웃 컴포넌트는 자동으로 params, searchParams를 받을 수 있어요.둘 다 “라우팅에서 온 값”이지만 성격이 완전히 다릅니다. 1) params = 경로(Path) 파라미터폴더 이름에 있는 동적 세그먼트가 params로 들어옵니다.예시파일: app/movies/[id]/page.tsxURL: /movies/123코드:export default function Page({ params,}: { params: { id: string };}) { return Movie ID: {params.id}; // "123"}특징라우트 구조로 결정됨 ([id], [...slug], [[...slug]])보통 “리소스 식별자” (id, slug 등)값은 문..

1. 빌드 Next.js 프로젝트를 배포하려면 우선 실행 가능한 형태로 코드를 변환한 다음에, 서버에서 실행해야 한다. 이때 코드를 변환하는 과정을 '빌드'라고 한다.npm run build명령어를 입력하면 .next/ 폴더에 실행에 필요한 파일들이 생성된다.빌드시 오류 발생이 되면 문제 점 확인 후 수정 2. 실행 npm run start빌드 버전으로 실행하여 테스트 3. 소스코드를  github에 pushgit push origin master 4. 배포 (with vercel)Vercel은 Next.js 개발 팀에서 만든 프론트엔드 배포 플랫폼으로 빌드와 배포 그리고 호스팅을 해주는 서비스를 제공한다.Vercel 장점자동화된 배포: 코드 변경 사항이 GitHub, GitLab, Bitbucket 등..

Tailwind CSS(opens in a new tab)는 Next.js와 매우 잘 어울리는 유틸리티 우선 CSS 프레임워크입니다.Install Tailwind CSS with Next.js4.0 버전 변경된 방식 (With Next.js)Install Tailwind CSSnpm install tailwindcss @tailwindcss/postcss postcss Configure PostCSS Pluginspostcss.config.mjs 파일을 root에 생성하고 아래 내용 작성postcss.config.mjsconst config = { plugins: { "@tailwindcss/postcss": {}, },};export default config; Import Tailwind C..