키모스토리

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..

프로젝트 전체에 대한 global css를 적용하고 싶다면 먼저 global.css를 작성 (1) /app/styles/global.css 생성 reset css 를 포함하여 프로젝트 전체에 적용할 스타일을 작성https://meyerweb.com/eric/tools/css/reset//* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn,..

예를 들어 #8에서 테스트 했던 코드중에 MovieVidios fetch 를 처리 하는 도중 오류가 발생했을 경우해당 페이지 전체는 오류로 인해 페이지를 표시 할 수 없게 된다. 이때 error.tsx파일을 이용하여 애러를 처리 할 수 있다 (movies)/movies/[id]/page.tsx import { Suspense } from "react";import MovieInfo from "../../../components/movie-info";import MovieVideos from "../../../components/movie-videos";export const metadata = { title: "Movie Detail",}export default async function MovieD..

페이지에서 여러개의 api를 호출해야 하는 경우 동시에 병렬요청하는 방법import { API_URL } from "../../../(home)/page";export const metadata = { title: "Movie Detail",}async function getMovie(id:string) { console.log(`Fetching movies: ${Date.now()}`); await new Promise((resolve) => setTimeout(resolve, 2000)); const response = await fetch(`${API_URL}/${id}`); return response.json();}async function getVideos(id:string) { c..

Client Side Fetch"use client" 키워드 필요- 클라이언트에서 페이지 render 후에 useEffect를 이용하여 fetch 를 요청해서 ui를 다시 render 함- use client 를 선언해야 했기 때문에 meta data 도 해당 페이지에 적용 할 수 없음- React App API DB "use client"import { useEffect, useState } from "react"// use client 선언으로 metatdata 사용불가가// export const metadata = {// title: "Home Page",// }export default function HomePage() { const [isLoading, setIsLoading] = ..

페이지주소 뒤에 파라메터를 이용한 Route 방식 하위 폴더명을 대괄호를 이용해서 작성 => [id] /app/(movies)/movies/[id]/page.tsx 요청 URL: http://localhost:3000/movies/1 params, searchParams export const metadata = { title: 'Movie Detail',}export default async function MovieDetail({ params, // [id] 폴더이름 searchParams, // ?key=value&key=value 형식}: { params: Promise; searchParams: Promise; }) { const {id} = await params; const ..

html 문서의 metadata 데이터를 관리/app/layout.tsx 에 있는 내용이 모든 문서에 병합되어 등록됨 예) /app/layout.tsx 의 metadata  에 description 데이터를 등록export const metadata = { description: 'The best movies on the best',} /app/(home)/page.tsx  안에 metadata 코드를 추가 하면서 title 만 등록export const metadata = { title: 'Home | Next Movies',}export default function Page(){ return ( Hello NextJs!! )} - 아래 결과처럼 title..