설치
시스템 요구 사항:
- Node.js 16.8 or 이후
- macOS, Windows(WSL 포함) 및 Linux가 지원됩니다.
자동 설치
모든 것을 자동으로 설정하는 [create-next-app]를 사용하여 새 Next.js 앱을 만드는 것이 좋습니다 . 프로젝트를 만들려면 다음을 실행합니다.
npx create-next-app@latest설치 시 다음 프롬프트가 표시됩니다.
What is your project named? my-appWould you like to use TypeScript? No / YesWould you like to use ESLint? No / YesWould you like to use Tailwind CSS? No / YesWould you like to use `src/` directory? No / YesWould you like to use App Router? (recommended) No / YesWould you like to customize the default import alias? No / YesNext.js는 이제 기본적으로 TypeScript, ESLint 및 Tailwind CSS 구성과 함께 제공됩니다. src애플리케이션 코드용 디렉토리를 사용하도록 선택할 수도 있습니다 .
메시지가 표시되면 create-next-app프로젝트 이름으로 폴더를 만들고 필요한 종속 항목을 설치합니다.
알아두면 좋은 정보 : 새 프로젝트에서 페이지 라우터를 사용할 수 있습니다 . React의 최신 기능을 활용하려면 앱 라우터로 새 애플리케이션을 시작하는 것이 좋습니다.
수동 설치
새 Next.js 앱을 수동으로 만들려면 필수 패키지를 설치합니다.
npm install next@latest react@latest react-dom@latestpackage.json을 열고 추가합니다 scripts.
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}이러한 스크립트는 응용 프로그램 개발의 여러 단계를 나타냅니다.
- dev: next dev개발 모드에서 Next.js를 시작하기 위해 실행됩니다.
- build: next build프로덕션 용도로 애플리케이션을 빌드하기 위해 실행됩니다.
- start: next startNext.js 프로덕션 서버를 시작하기 위해 실행됩니다.
- lint: next lintNext.js의 내장 ESLint 구성을 설정하기 위해 실행됩니다.
app폴더 만들기
다음으로 app폴더를 만들고 layout.tsx과 page.tsx 파일을 추가합니다 . 사용자가 애플리케이션의 루트를 방문할 때 렌더링됩니다.
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}마지막으로 초기 app/page.tsx콘텐츠가 포함된 홈페이지를 만듭니다 .
export default function Page() {
return <h1>Hello, Next.js!</h1>
}알아두면 좋은 정보 : 를 만드는 것을 잊은 경우 layout.tsx로 개발 서버를 실행할 때 Next.js가 자동으로 이 파일을 만듭니다 next dev.
public폴더 만들기
선택적으로 이미지, 글꼴 등과 같은 정적 자산을 저장할 public폴더를 생성할 수 있습니다.그러면 기본 URL( /)에서 시작하는 코드에서 public디렉터리 내부의 파일을 참조할 수 있습니다.
개발 서버 실행
- npm run dev명령어로 개발 서버를 시작합니다.
- 신청서를 보려면 http://localhost:3000 방문하십시오 .
- 브라우저에서 업데이트된 결과를 보려면 편집하거나 app/layout.tsx or app/page.tsx 저장 하십시오.
Next.js 프로젝트 구조
이 페이지는 Next.js 프로젝트의 파일 및 폴더 구조에 대한 개요를 제공합니다. 최상위 파일 및 폴더, 구성 파일, 및 디렉토리 내의 라우팅 규칙을 다룹 app니다 pages.
최상위 파일
| Next.js | |
| next.config.js | Next.js용 구성 파일 |
| middleware.ts | Next.js 요청 미들웨어 |
| instrumentation.ts | OpenTelemetry 및 계측 |
| .env | 환경 변수 |
| .env.local | 로컬 환경 변수 |
| .env.production | 프로덕션 환경 변수 |
| .env.development | 개발 환경 변수 |
| .next-env.d.ts | Next.js용 TypeScript 선언 파일 |
| 생태계 | |
| package.json | 프로젝트 의존성 및 스크립트 |
| .gitignore | 무시할 Git 파일 및 폴더 |
| tsconfig.json | TypeScript용 구성 파일 |
| jsconfig.json | JavaScript용 구성 파일 |
| .eslintrc.json | ESLint용 구성 파일 |
최상위 폴더
| app | 앱 라우터 |
| pages | 페이지 라우터 |
| public | 제공할 정적 자산 |
| src | 선택적 애플리케이션 소스 폴더 |
app라우팅 규칙
라우팅 파일
| layout | .js .jsx .tsx | 공들여 나열한 것 |
| page | .js .jsx .tsx | 페이지 |
| loading | .js .jsx .tsx | 로딩 UI |
| not-found | .js .jsx .tsx | UI를 찾을 수 없음 |
| error | .js .jsx .tsx | 오류 UI |
| global-error | .js .jsx .tsx | 전역 오류 UI |
| route | .js .ts | API 끝점 |
| template | .js .jsx .tsx | 다시 렌더링된 레이아웃 |
| default | .js .jsx .tsx | 병렬 경로 대체 페이지 |
중첩 경로
| folder | 경로 구간 |
| folder/folder | 중첩된 경로 세그먼트 |
동적 경로
| [folder] | 동적 경로 구간 |
| [...folder] | 포괄적 세그먼트 |
| [[...folder]] | 선택적 포괄적인 세그먼트 |
경로 그룹 및 개인 폴더
| (folder) | 라우팅에 영향을 주지 않고 경로 그룹화 |
| _folder | 라우팅에서 폴더 및 모든 하위 세그먼트 선택 |
병렬 및 가로채기 경로
| @folder | 명명된 슬롯 |
| (.)folder | 같은 수준 가로채기 |
| (..)folder | 한 단계 위의 가로채기 |
| (..)(..)folder | 위의 두 수준 차단 |
| (...)folder | 루트에서 가로채기 |
메타데이터 파일 규칙
앱 아이콘
| favicon | .ico | 파비콘 파일 |
| icon | .ico .jpg .jpeg .png .svg | 앱 아이콘 파일 |
| icon | .js .ts .tsx | 생성된 앱 아이콘 |
| apple-icon | .jpg .jpeg,.png | 애플 앱 아이콘 파일 |
| apple-icon | .js .ts .tsx | 생성된 Apple 앱 아이콘 |
그래프 및 Twitter 이미지 열기
| opengraph-image | .jpg .jpeg .png .gif | 그래프 이미지 파일 열기 |
| opengraph-image | .js .ts .tsx | 생성된 오픈 그래프 이미지 |
| twitter-image | .jpg .jpeg .png .gif | 트위터 이미지 파일 |
| twitter-image | .js .ts .tsx | 생성된 트위터 이미지 |
SEO
| sitemap | .xml | 사이트맵 파일 |
| sitemap | .js .ts | 생성된 사이트맵 |
| robots | .txt | 로봇 파일 |
| robots | .js .ts | 생성된 로봇 파일 |
pages라우팅 규칙
특수 파일
| _app | .js .jsx .tsx | 맞춤형 앱 |
| _document | .js .jsx .tsx | 맞춤 문서 |
| _error | .js .jsx .tsx | 사용자 지정 오류 페이지 |
| 404 | .js .jsx .tsx | 404 오류 페이지 |
| 500 | .js .jsx .tsx | 500 오류 페이지 |
노선
| 폴더 규칙 | ||
| index | .js .jsx .tsx | 홈페이지 |
| folder/index | .js .jsx .tsx | 중첩된 페이지 |
| 파일 규칙 | ||
| index | .js .jsx .tsx | 홈페이지 |
| file | .js .jsx .tsx | 중첩된 페이지 |
동적 경로
| 폴더 규칙 | ||
| [folder]/index | .js .jsx .tsx | 동적 경로 구간 |
| [...folder]/index | .js .jsx .tsx | 포괄적 세그먼트 |
| [[...folder]]/index | .js .jsx .tsx | 선택적 포괄적인 세그먼트 |
| 파일 규칙 | ||
| [file] | .js .jsx .tsx | 동적 경로 구간 |
| [...file] | .js .jsx .tsx | 포괄적 세그먼트 |
| [[...file]] | .js .jsx .tsx | 선택적 포괄적인 세그먼트 |
'programming > JavaScript' 카테고리의 다른 글
| [html/next.js] 상위 폴더 파일 import 하기 (0) | 2023.05.11 |
|---|---|
| [html/next.js] component 문법 (0) | 2023.05.11 |
| next.js와 node.js의 차이점 (0) | 2023.05.10 |
| [html/next.js] 이미지 삽입하기 (0) | 2023.05.10 |
| [html/next.js] array 문법&반복문 map() (0) | 2023.05.10 |