함수를 Promise로 표시 후 async하고 await을 사용하여 React 구성 요소에서 직접 데이터를 가져올 수 있다. async및 await 서버 구성 요소에서 데이터를 가져오는 데 사용할 수 있다 async function getData() { const res = await fetch('...') // The return value is *not* serialized // You can return Date, Map, Set, etc. // Recommendation: handle errors if (!res.ok) { // This will activate the closest `error.js` Error Boundary throw new Error('Failed to fetch data'..
기본적으로 앱 라우터 내부의 모든 페이지와 레이아웃은 기본적으로 React 서버 구성 요소이다. 이건 코드가 서버에서만 실행됨을 의미한다. 따라서 응용 프로그램에 있는 모든 새로운 추가 구성 요소에 대해 추가 JS를 클라이언트로 보내지 않고 서버측에서만 안전하게 실행된다. 클라이언트 측에 더 많은 코드를 도입하려는 경우에는 상호작용을 위한 클라이언트 구성 요소를 갖게 된다. 앱 디렉토리의 이 페이지에서 정의한 인덱스 경로가 있지만 새 경로를 만들려면 새 폴더를 만들고 호출해야한다. 정적 경로 이상을 지원한다. NextJS에서 Routing은 App폴더 안에서 진행된다. App폴더 안에서 폴더가 만들어지면 그 폴더의 이름으로 url이 생성된다. 예를 들어 about이라는 폴더가 생성된다면 page.tsx라..
cookies().get(name) 쿠키 이름을 사용하고 이름과 값이 있는 개체를 반환하는 메서드 name이 없는 쿠키는 undefined를 반환 여러 쿠키가 일치하는 경우 첫 번째 일치 항목만 반환 import { cookies } from 'next/headers' export default function Page() { const cookieStore = cookies() const theme = cookieStore.get('theme') return '...' } cookies().getAll() get과 유사 하지만 name과 일치하는 모든 쿠키 목록을 반환하는 메서드 name을 지정하지 않으면 사용 가능한 모든 쿠키를 반환 import { cookies } from 'next/headers..
Error.js 경로 세그먼트에 대한 오류 UI 경계 Server/Client Component에서 발생하는 예상치 못한 오류를 잡고 대체 UI를 표시 Layout.js 경로 간에 공유되는 UI export default function DashboardLayout({ children, }: { children: React.ReactNode }) { return {children} } 루트 레이아웃 : 루트 디렉토리 최상위 레이아웃 app. 및 태그 및 기타 전역적으로 공유되는 UI를 정의하는 데 사용 export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } Props C..
import Image from 'next/image' export default function Page() { return ( ) } 필수 Props src : 이미지 경로 width : 길이 height : 높이 alt : 정보 import Image from 'next/image' export default function Page() { return ( ) } Props Prop Example Type Required src src="/profile.png" String Yes width width={500} Integer (px) Yes height height={500} Integer (px) Yes alt alt="Picture of the author" String Yes loader l..
앱 라우터 소개 지난 몇 달 동안 Next.js 팀은 Next.js와 React 서버 컴포넌트 및 React 18 기능을 통합하기 위해 노력해왔습니다. 이제 새로운 앱 디렉토리에서 이러한 새로운 기능을 사용해 볼 수 있습니다. 앱 라우터는 현재 베타 버전이며 프로덕션 환경에서 사용하지 않는 것이 좋습니다. 기능 개요 다음은 앱 라우터의 새로운 기능을 요약한 것입니다: 라우팅레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 서버 컴포넌트 위에 구축된 새로운 파일 시스템 기반 라우터입니다. 렌더링클라이언트 및 서버 컴포넌트를 사용한 클라이언트 측 및 서버 측 렌더링. 서버의 정적 렌더링과 동적 렌더링은 Next.js를 통해 더욱 최적화됩니다. Edge 및 Node.js 런타임에서 스트리밍. 데이..
Installation : 설치 시스템 요구 사항 먼저 개발 환경이 다음 요구 사항을 충족하는지 확인하세요: Node.js 16.8 이상. MacOS, Windows(WSL 포함) 및 Linux가 지원됩니다. Note: pages 디렉터리에는 Node.js v14 이상이 필요하지만, app 디렉터리에는 Node v16.8.0 이상이 필요합니다. 자동 설치 app 디렉터리를 사용하여 새 Next.js 프로젝트를 자동으로 생성합니다: npx create-next-app@latest--experimental-app create-next-app는 이제 기본적으로 TypeScript와 함께 제공됩니다. 자세한 내용은 **TypeScript**를 참조하세요. 수동 설치 새 Next.js 앱을 만들려면 필요한 패키지..
