본문 바로가기

Framework63

Next.js 15: 새로운 기능과 향상된 성능으로 더욱 강력해진 Next.js Next.js 15는 React 기반 서버 사이드 렌더링(SSR) 프레임워크의 새로운 이정표를 제시하며, 개발자들에게 더욱 편리하고 효율적인 개발 환경을 제공합니다. 이번 포스팅에서는 Next.js 15의 주요 변경점과 새롭게 추가된 기능들을 자세히 살펴보고, 실제 예제를 통해 어떻게 활용할 수 있는지 알아보겠습니다.1. 자동화된 업그레이드 CLINext.js 15에서는 @next/codemod CLI를 통해 이전 버전에서 새 버전으로의 업그레이드를 자동화했습니다. 이를 통해 수동으로 코드를 변경해야 하는 번거로움을 줄이고, 업그레이드 과정을 간소화할 수 있습니다.npx @next/codemod@canary upgrade latest 2. 비동기 요청 API (중요 변경사항)Next.js 15에서는 비동.. 2024. 11. 8.
[공식문서] NextJS - Deploying Your Next.js App 이 마지막 기본 레슨에서는 Next.js 앱을 프로덕션 환경에 배포하는 방법을 알아보겠습니다. Next.js의 창시자들이 만든 플랫폼인 Vercel에 Next.js 앱을 배포하는 방법을 배우겠습니다. 또한 다른 배포 옵션에 대해서도 이야기할 것입니다. 사전 준비: 이 레슨을 수강하려면 GitHub 계정이 필요합니다. 이 레슨에서 다음을 배우게 됩니다. Next.js 앱을 Vercel에 배포하는 방법 DPS 워크플로우: 개발(Develop), 미리보기(Preview), 배포(Ship) Next.js 앱을 자체 호스팅 제공 업체에 배포하는 방법 시작 코드 다운로드(선택 사항) 이전 레슨에서 진행 중이 아니라면 다음 레슨을 위해 시작 코드를 다운로드하고 설치하고 실행할 수 있습니다. 이렇게 하면 이전 레슨의 .. 2023. 9. 14.
[공식문서] NextJS - API Routes Next.js는 Node.js 서버리스 함수로 API 엔드포인트를 쉽게 생성할 수 있는 API 라우트를 지원합니다. 이 레슨에서는 블로그 앱에는 필수가 아니지만 API 라우트를 사용하는 방법에 대해 간략히 설명하겠습니다. 이 레슨에서 다음 내용을 배울 수 있습니다: API 라우트를 생성하는 방법. API 라우트에 관한 유용한 정보. 시작 코드 다운로드 (선택 사항) 이전 레슨에서 진행하지 않으신다면, 이 레슨을 위한 시작 코드를 다운로드하고 설치한 후 실행할 수 있습니다. 아래 명령을 사용하여 이전 레슨의 결과와 동일한 nextjs-blog 디렉토리를 설정합니다. 이전 레슨을 완료한 경우 이 작업이 필요하지 않습니다. npx create-next-app@latest nextjs-blog --use-npm.. 2023. 9. 14.
[공식문서] NextJS - Dynamic Routes 우리는 인덱스 페이지에 블로그 데이터를 채웠지만 아직 개별 블로그 페이지를 만들지 않았습니다 (여기에 원하는 결과가 있습니다). 이러한 페이지의 URL을 블로그 데이터에 따라 다르게 만들려면 동적 라우트를 사용해야합니다. 이 레슨에서는 다음을 배우게 됩니다: getStaticPaths를 사용하여 동적 라우트를 가진 페이지를 정적으로 생성하는 방법. 각 블로그 게시물의 데이터를 가져오기 위해 getStaticProps를 작성하는 방법. remark를 사용하여 마크다운을 렌더링하는 방법. 날짜 문자열을 깔끔하게 서식화하는 방법. 동적 라우트를 가진 페이지로 연결하는 방법. 동적 라우트에 관한 유용한 정보. 시작 코드 다운로드 (선택 사항) 이전 레슨에서 진행 중이 아니라면 이 레슨을 위한 시작 코드를 다운로.. 2023. 9. 12.
[공식문서] NextJS - Pre-rendering and Data Fetching #9 요청 시간에 데이터 가져오기 빌드 시간이 아닌 요청 시간에 데이터를 가져와야 하는 경우 Server-side Rendering을 시도할 수 있습니다. 서버 사이드 렌더링을 사용하려면 페이지에서 getStaticProps 대신 getServerSideProps를 내보내야(export) 합니다. getServerSideProps 사용 다음은 getServerSideProps의 시작 코드입니다. 우리의 블로그 예제에는 필요하지 않으므로 구현하지 않겠습니다. export async function getServerSideProps(context) { return { props: { // props for your component }, }; } 왜냐하면 getServerSideProps는 요청 시간에 호출되므로.. 2023. 9. 8.
[공식문서] NextJS - Pre-rendering and Data Fetching #8 getStaticProps 세부 정보 getStaticProps에 대해 알아야 할 몇 가지 중요한 정보가 있습니다. 외부 API 가져오거나 데이터베이스 쿼리하기 lib/posts.js에서는 파일 시스템에서 데이터를 가져오는 getSortedPostsData를 구현했습니다. 그러나 외부 API 엔드포인트와 같은 다 른 소스에서 데이터를 가져올 수도 있습니다. 이렇게 하면 아무 문제없이 작동합니다. export async function getSortedPostsData() { // Instead of the file system, // fetch post data from an external API endpoint const res = await fetch('..'); return res.json(); .. 2023. 9. 8.
[공식문서] NextJS - Pre-rendering and Data Fetching #7 getStaticProps 구현하기 Next.js의 사전 렌더링 Next.js에는 Static Generation 및 Server-side Rendering이라는 두 가지 사전 렌더링 형식이 있습니다. 차이점은 페이지의 HTML을 생성하는 시점에 있습니다. Static Generation은 HTML을 빌드 시간에 생성하는 사전 렌더링 방법입니다. 사전 렌더링된 HTML은 각 요청마다 재사용됩니다. Server-side Rendering은 각 요청마다 HTML을 생성하는 사전 렌더링 방법입니다. 중요한 점은 Next.js에서 각 페이지에 사용할 사전 렌더링 형식을 선택할 수 있다는 것입니다. Static Generation을 대부분의 페이지에 사용하고 일부 페이지에 Server-side Rendering을.. 2023. 9. 7.
[공식문서] NextJS - Pre-rendering and Data Fetching #6 간단한 블로그 아키텍처 만들기 우리 예제의 블로그 게시물은 애플리케이션 디렉토리의 로컬 마크다운 파일로 저장됩니다(외부 데이터 소스에서 가져오는 것이 아닙니다). 따라서 파일 시스템에서 데이터를 읽어와야 합니다. 이 섹션에서는 파일 시스템에서 데이터를 읽는 블로그를 만드는 단계를 살펴보겠습니다. 마크다운 파일 생성 먼저 루프 폴더에 posts(이것은 pages/posts와 동일하지 않습니다)라는 새로운 최상위 디렉토리를 만듭니다. 그런 다음 posts 내에 pre-rendering.md 및 ssg-ssr.md 두 개의 파일을 만듭니다. 이제 다음 코드를 posts/pre-rendering.md에 복사하세요. --- title: 'Two Forms of Pre-rendering' date: '2020-01.. 2023. 9. 2.
[공식문서] NextJS - Pre-rendering and Data Fetching #5 데이터를 사용하거나 사용하지 않고 정적 생성 정적 생성은 데이터를 사용하거나 사용하지 않고 수행할 수 있습니다. 지금까지 만든 모든 페이지는 외부 데이터 검색이 필요하지 않습니다. 이러한 페이지는 프로덕션용으로 앱이 빌드될 때 자동으로 정적으로 생성됩니다. 그러나 일부 페이지의 경우 외부 데이터를 가져와 HTML을 렌더링하지 않으면 안될 수 있습니다. 파일 시스템에 엑세스하거나 외부 API를 가져오거나 빌드 시간에 데이터베이스를 쿼리해야 할 수 있습니다. Next.js는 이러한 경우를 지원하며, 이를 통해 데이터를 사용한 정적 생성을 쉽게 할 수 있습니다. getStaticProps를 사용한 데이터를 사용한 정적 생성 어떻게 작동할까요? Next.js에서 페이지 컴포넌트를 내보낼 때 getStaticPr.. 2023. 8. 26.

티스토리툴바