programming/JavaScript

nextjs 설치 방법과 프로젝트 구조

Jofresh 2023. 7. 5. 16:11
728x90
반응형

설치

시스템 요구 사항:

  • 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 / Yes

Next.js는 이제 기본적으로 TypeScript, ESLint 및 Tailwind CSS 구성과 함께 제공됩니다. src애플리케이션 코드용 디렉토리를 사용하도록 선택할 수도 있습니다 .

메시지가 표시되면 create-next-app프로젝트 이름으로 폴더를 만들고 필요한 종속 항목을 설치합니다.

알아두면 좋은 정보 : 새 프로젝트에서 페이지 라우터를 사용할 수 있습니다 . React의 최신 기능을 활용하려면 앱 라우터로 새 애플리케이션을 시작하는 것이 좋습니다.

수동 설치

새 Next.js 앱을 수동으로 만들려면 필수 패키지를 설치합니다.

npm install next@latest react@latest react-dom@latest

package.json을 열고 추가합니다 scripts.

 
패키지.json
 
{
  "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 파일을 추가합니다 . 사용자가 애플리케이션의 루트를 방문할 때 렌더링됩니다.

 

필수 및 태그를 사용하여 내부에 루트 레이아웃을 만듭니다 .app/layout.tsx<html><body>
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

마지막으로 초기 app/page.tsx콘텐츠가 포함된 홈페이지를 만듭니다 .

 
앱/페이지.tsx
타입스크립트
export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

알아두면 좋은 정보 : 를 만드는 것을 잊은 경우 layout.tsx로 개발 서버를 실행할 때 Next.js가 자동으로 이 파일을 만듭니다 next dev.

public폴더 만들기

선택적으로 이미지, 글꼴 등과 같은 정적 자산을 저장할 public폴더를 생성할 수 있습니다.그러면 기본 URL( /)에서 시작하는 코드에서 public디렉터리 내부의 파일을 참조할 수 있습니다.

개발 서버 실행

  1. npm run dev명령어로 개발 서버를 시작합니다.
  2. 신청서를 보려면 http://localhost:3000 방문하십시오 .
  3. 브라우저에서 업데이트된 결과를 보려면 편집하거나 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 선택적 포괄적인 세그먼트

 

728x90
반응형