Next.js 썸네일형 리스트형 Next.js 13-2 Deploying Static Exports Next.js는 정적 사이트 또는 SPA(Single-Page Application)로 시작한 다음 나중에 선택적으로 서버가 필요한 기능을 사용하도록 업그레이드할 수 있다. next build를 실행할 때 Next.js는 경로별로 HTML 파일을 생성한다. 엄격한 SPA를 개별 HTML 파일로 나누면, Next.js는 클라이언트 측에서 불필요한 JavaScript 코드를 로드하지 않도록 하여 번들 크기를 줄이고 더 빠른 페이지 로드를 가능하게 한다. Next.js는 이 정적 내보내기를 지원하므로 HTML/CSS/JS 정적 자산을 제공할 수 있는 모든 웹 서버에 배포하고 호스팅 할 수 있다. Configuration 정적 내보내기를 활성화하려면 내부에서 출력 모드를 변경하면 된다. // next.confi.. 더보기 Next.js 13-1 Deploying 여기에서는 Next.js Build API를 사용하여 관리형 또는 자체 호스팅 배포 방법을 보여준다. Next.js Build API 다음 빌드는 프로덕션을 위해 애플리케이션의 최적화된 버전을 생성한다. 이 표준 출력에는 다음이 포함된다. getStaticProps 또는 자동 정적 최적화를 사용하는 페이지용 HTML 파일 전역 스타일 또는 개별 범위 스타일용 CSS 파일 Next.js 서버에서 동적 콘텐츠를 사전 렌더링하기 위한 JavaScript React를 통한 클라이언트 측 상호작용을 위한 JavaScript 이 출력은 .next 폴더 내에서 생성된다. .next/static/chunks/pages - 이 폴더 내의 각 JavaScript 파일은 동일한 이름을 가진 경로와 관련된다. 예를 들어 .n.. 더보기 Next.js 12-7 Configuring Draft Mode 정적 렌더링은 페이지가 헤드리스 CMS에서 데이터를 가져올 때 유용하다. 그러나 헤드리스 CMS에서 초안을 작성할 때 페이지에서 즉시 초안을 보고 싶을 때는 적합하지 않다. Next.js가 빌드 시간 대신 요청 시간에 이러한 페이지를 렌더링 하고 게시된 콘텐츠 대신 초안 콘텐츠를 가져오길 원할 것이다. 이 특정한 경우에만 Next.js가 동적 렌더링으로 전환되기를 원할 것이다. Next.js에는 이 문제를 해결하는 Draft Mode라는 기능이 있다. 다음은 사용 방법에 대한 지침이다. Step 1: Route Handler 생성 및 액세스 먼저 경로 처리기를 만든다. 어떤 이름이든 가질 수 있다. app/api/draft/route.ts 그런 다음 next/headers에서 draftMode를 가져오고.. 더보기 Next.js 12-6 Configuring src Directory 프로젝트의 루트에 특별한 Next.js 앱 또는 페이지 디렉토리를 두는 대신 Next.js는 src 디렉토리 아래에 애플리케이션 코드를 배치하는 일반적인 패턴도 지원한다. 이렇게 하면 대부분 프로젝트의 루트에 있는 프로젝트 구성 파일에서 애플리케이션 코드가 분리된다. 일부 개인과 팀이 선호한다. src 디렉토리를 사용하려면 앱 라우터 폴더 또는 페이지 라우터 폴더를 각각 src/app 또는 src/pages로 이동한다. /public 디렉토리는 프로젝트의 루트에 남아 있어야 한다. package.json, next.config.js 및 tsconfig.json과 같은 구성 파일은 프로젝트의 루트에 남아 있어야 한다. .env.* 파일은 프로젝트의 루트에 남아 있어야 한다. src/app 또는 src/pa.. 더보기 Next.js 12-5 Configuring MDX Markdown은 텍스트 형식을 지정하는 데 사용되는 경량 마크업 언어이다. 일반 텍스트 구문을 사용하여 작성하고 구조적으로 유효한 HTML로 변환할 수 있다. 일반적으로 웹 사이트 및 블로그에 콘텐츠를 작성하는 데 사용된다. // input I **love** using .[Next.js[_(https://nextjs.org/). // output I love using Next.js MDX는 마크다운 파일에서 직접 JSX를 작성할 수 있는 마크다운의 상위 집합이다. 이는 동적 상호 작용을 추가하고 콘텐츠 내에 React 컴포넌트를 포함하는 강력한 방법이다. Next.js는 애플리케이션 배부의 로컬 MDX 콘텐츠와 서버에서 동적으로 가져온 원격 MDX 파일을 모두 지원할 수 있다. Next.js 플러그.. 더보기 Next.js 12-4 Configuring Absolute Imports and Module Path Aliases Next.js는 tsconfig.json과 jsconifg.json 파일의 "paths" 및 "baseUrl" 옵션을 기본적으로 지원한다. 이 옵션을 사용하면 프로젝트 디렉토리를 절대 경로에 별칭으로 지정하여 모듈을 더 쉽게 가져올 수 있다. // before import { Button } from '../../../components/button' // after import { Button } from '@/components/button' Absolute Imports baseUrl 구성 옵션을 사용하면 프로젝트의 루트에서 직접 가져올 수 있다. // tsconfig.json or jsconfig.json { "compilerOptions": { "baseUrl": "." } } // compon.. 더보기 Next.js 12-3 Configuring Environment Variables Nest.js는 환경 변수에 대한 기본 제공 지원을 제공하므로 다음을 수행할 수 있다. env.local을 사용하여 환경 변수를 로드한다. NEXT_PUBLIC_ 접두사를 사용하여 브라우저에 대한 번들 환경 변수를 제공한다. Loading Environment Variables Next.js는 .env.local에서 process.env로 환경 변수를 로드하는 기능을 기본적으로 지원한다. // .env.local DB_HOST=localhost DB_USER=myuser DB_PASS=mypassword 이렇게 하면 process.env.DB_HOST, process.DB_USER와 process.env.DB_PASS가 Node.js 환경에 자동으로 로드되어 경로 처리기에서 사용할 수 있다. 다른 변수 .. 더보기 Next.js 12-2 Configuring ESLint Next.js는 즉시 사용 가능한 통합 ESLint 경험을 제공한다. 다음 lint를 package.json에 스크립트로 추가한다. // package.json { "script": { "lint": "next lint" } } 그런 다음 npm run lint 또는 yarn lint를 실행한다. 응용 프로그램에 ESLint가 아직 구성되어 있지 않은 경우 설치 및 구성 프로세스를 안내한다. 구성 프로세스에선 다음 세 가지 옵션 중 하나를 선택할 수 있다. - Strict: 엄격한 Core Web Vitals 규칙 세트와 함께 Next.js의 기본 ESLint 구성을 포함한다. ESLint를 처음 설정하는 개발자에게 권장되는 구성이다. // .eslintrc.json { "extends": "next/c.. 더보기 이전 1 2 3 4 ··· 6 다음
