React Essentials Next.js로 애플리케이션을 구축하려면 Server Components와 같은 React의 최신 기능에 익숙해지는 것이 도움이 됩니다. 이 페이지에서는 서버 컴포넌트와 클라이언트 컴포넌트의 차이점, 사용 시기 및 권장 패턴을 살펴봅니다. 서버 컴포넌트 서버 및 클라이언트 컴포넌트를 사용하면 개발자가 서버와 클라이언트에 걸쳐 있는 응용 프로그램을 구축하여 클라이언트 측 앱의 풍부한 상호 작용과 기존 서버 렌더링의 향상된 성능을 결합할 수 있습니다. 서버 컴포넌트에 대한 생각 React가 UI 구축에 대한 생각 방식을 어떻게 바꾸었는지와 유사하게 React Server Components는 서버 와 클라이언트를 활용하는 하이브리드 애플리케이션 구축을 위한 새로운 정신 모델을 ..
이 페이지는 Next.js 프로젝트의 파일과 폴더 구조 개요를 제공합니다. 최상위 파일 및 폴더, 구성 파일, 그리고 app 디렉토리 내에서의 라우팅 규칙을 다룹니다. 최상위 파일 Next.js next.config.js Next.js용 구성 파일 middleware.ts Next.js 요청 미들웨어 .env 환경 변수 .env.local 로컬 환경 변수 .env.production 프로덕션 환경 변수 .env.development 개발 환경 변수 .next-env.d.ts Next.js용 TypeScript 선언 파일 Ecosystem package.json 프로젝트 의존성 및 스크립트 .gitignore 무시할 Git 파일 및 폴더 tsconfig.json TypeScript용 구성 파일 jsconf..
시스템 요구 사항 Node.js 16.8 이상 macOS, Windows (WSL 포함), Linux을 지원합니다. 자동 설치 방법 새로운 Next.js 앱을 만드는 것을 추천하는 create-next-app을 사용하여 자동으로 모든 것을 설정합니다. 프로젝트를 만들려면 다음을 실행합니다: npx create-next-app@latest 설치 중에 다음과 같은 프롬프트가 표시됩니다: What is your project named? [프로젝트 이름] Would you like to use TypeScript with this project? Yes Would you like to use ESLint with this project? Yes Would you like to use Tailwind CSS w..
Next.js은 무엇인가? Next.js는 React 컴포넌트를 사용하여 웹 애플리케이션을 구축할 수 있는 프레임워크입니다. 내부에서 번들링, 컴파일 등의 도구를 추상화하고 자동으로 구성하여 애플리케이션 구축에 집중할 수 있습니다. 개인 개발자 또는 대규모 팀 모두 Next.js를 사용하여 대화형, 동적 및 빠른 웹 애플리케이션을 구축할 수 있습니다. 주요 기능 특징 설명 라우팅 (Routing) 서버 구성 요소 위에 구축된 파일 시스템 기반 라우터로, 레이아웃, 중첩된 라우팅, 로드 상태, 오류 처리 등을 지원합니다. 렌더링 (Rendering) Next.js에서 클라이언트 측 및 서버 측 렌더링을 지원하며, 클라이언트와 서버 컴포넌트를 사용하여 더욱 최적화된 정적 및 동적 렌더링을 제공합니다. 또한 ..
이 글은 2021년 2월 19일에 작성되었습니다. Next JS에서는 SSG와 SSR 두 가지의 사전 렌더링 방식이 존재합니다. SSG는 프로젝트가 빌드되는 시점에 필요한 데이터를 미리 호출하며 이를 사용하기 위해 next js에서 getStaticProps와 getStaticPaths함수를 제공합니다. SSR은 각 페이지 요청마다 데이터 통신을 하며 next js에서는 getServerSideProps함수를 제공합니다. 이번 글에서는 getStaticProps와 getStaticPaths 그리고 getServerSideProps함수 사용방법에 대해 알아보겠습니다. getStaticProps /* pages/home/index.js */ export default function Home({homeDat..
이 글은 2021년 5월 1일에 작성되어 레거시 내용이 포함되어 있습니다. 최신 Next js Image 공식 문서를 확인 해주세요 서론 Next.js는 버전 10.0.0부터 이미지 태그를 자동으로 최적화는 next/image를 제공하고 있습니다. next/image의 는 HTML의 를 최신 웹 용으로 확장합니다. 를 사용하면 자동으로 크기를 최적화하는 WebP 같은 최신 형식의 이미지를 제공받을 수 있습니다. 이는 더 작은 장치의 화면에서 큰 이미지가 전송되는 것을 방지할 수 있습니다. 또한 Next.js가 향후 이미지 형식을 자동으로 채택하고 해당 형식을 지원하는 브라우저에 제공할 수 있습니다. 는 모든 이미지 소스에서 작동합니다. 이미지가 CMS와 같은 외부 데이터 소스에서 호스팅 되는 경우에도 여..
해당글은 2021년 5월 21일에 작성되어 레거시한 내용이 포함되어 있습니다. 설치 Apollo Client 및 GraphQL 종속성을 추가합니다. yarn add @apollo/client graphql subscriptions-transport-ws lib/apolloClient.js 파일 생성 Apollo 클라이언트 설정을 저장할 lib/apolloClient.js 파일을 생성합니다. import { ApolloClient, HttpLink, InMemoryCache, createHttpLink, split } from "@apollo/client"; import { concatPagination, getMainDefinition, offsetLimitPagination } from "@apollo..
