Frameworks/Next.js

[Next.js] Next.js 프로젝트 시작하기 (Page Router ver.)

dev-ini 2024. 11. 5. 21:48
728x90

 

 

 

Next.js를 완전 처음 접하는 입문자 기준에서, Next 프로젝트를 시작하는 법을 알아보자!

 

 

 

 

 

 1.  폴더를 하나 생성한다. (필자가 만든 폴더 이름은 "onebite-next") 

 

 

 

 

 2. VsCode에서 "onebite-next" 폴더를 연다. 

 

 

 

 

 3. 터미널에 아래와 같은 명령어를 입력한다. 

 

npx라는 도구를 이용해서 새로운 next 앱을 생성하는 명령어이다.

npx create-next-app@14 section02

 

* npx : "Node Package Executor" → npm.js.com에 등록돼있는 최근버전의 Node 패키지를 다운로드 없이 바로 실행시키는 명령어

* create-next-app : Next.js 공식문서에서 안내하고 있는 새로운 Next 앱을 생성하는 Node.js 패키지

* @14 : 현재 설치하려는 버전, 14버전에서는 Page Router에 존재하는 모든 기능들을 안정적으로 사용 가능함. (15버전은 App Router할 때 설치 예정)

* section02 : 패키지의 이름 

 

 

 

 4. 옵션 설정하기 

 

 

* TS, ESLint, Tailwind CSS → 프로젝트에 따라 선택적으로 체크

* `src/` directory → src 디렉토리를 사용해도 되고, 안해도 됨. 선택의 영역임

* App Router → 필자는 Page Router 실습중이라 잠시 NO!

* import alias → 절대 경로로 모듈을 import 할 수 있도록 도와주는 기능을 커스텀 할 것인가? NO를 선택하면, import alias 기능을 그대로 사용 가능함
ex. import A from "@/components/~" 이런식으로 사용 가능 (@는 /src 경로를 의미함)

 

 

 

 5. 설치 완료하기 

 

정상적으로 설치되면 아래와 같이 터미널에 뜨고 section02 파일이 생성된다.

 

 

 

 6. 폴더 다시 열기 

 

VsCode에서 폴더 열기를 누르고 다시 section02 폴더를 연다.

 

 

 

 7.  터미널 창에 아래와 같은 명령어를 입력한다. 

 

npm run dev

* npm run dev :  개발모드로 Next App 실행

 

 

 

 

 8. http://localhost:3000/ 에 들어가면 아래와 같이 페이지가 뜬다. 

 

 

 

 

 9.  pages 폴더의 하위 폴더들 살펴보기 

 

 1) pages 폴더의 하위 폴더들은 페이지 역할을 한다. 

 

예를들어, pages 폴더 안에 test.tsx 파일을 만들고, http://localhost:3000/test 로 들어가면, 해당 폴더가 페이지로 바로 라우팅된다.

 

 test.tsx 

export default function Page() {
  return <h1>Test</h1>;
}

 

 

 

 2) _app.tsx 는 무슨 역할을 할까? 

 

리액트에서의 App 컴포넌트와 동일한 역할을 한다. (모든 컴포넌트들의 부모 컴포넌트 역할 = Root 컴포넌트의 역할)

즉, Next app에서 _app.tsx는 모든 페이지 역할을 하는 컴포넌트들의 부모 컴포넌트가 된다!

 

 _app.tsx 

 

모든 페이지에 공통적으로 나타나야하는 것들을 (예컨대 헤더 같은 것들) 이곳에 추가하면 된다.

이렇게 하면 모든 페이지에 헤더가 보이게 된다.

 

 

 

 

 3) _document.tsx는 무슨 역할을 할까? 

 

Next App에 모든 페이지에 공통적으로 적용 될 로직, 레이아웃, 데이터를 다루는 파일이다.

리액트앱의 index.html과 거의 비슷한 역할을 한다.

모든 페이지에 적용이 돼야하는 html 태그 관리하기 위해 사용된다.  (메타태그, 폰트, 구글 애널리틱스 등)

<Html lang="ko">로 바꾸면, 모든페이지에서의 언어 속성이 한국어로 설정된다.

 

 _document.tsx 

 

 

 

 3) next.config.mjs는 무슨 역할을 할까? 

 

Next App의 설정을 관리하는 파일이다.

여기서 reactStrictMode 설정을 true에서 false로 바꿔줄 것이다.

왜냐하면 StrictMode가 켜져있으면, 리액트앱에 존재하는 잠재적인 문제를 검사하기 위해 개발 모드를 실행했을때 컴포넌트를 두번이나 실행시켜버리는데, 이렇게 되면 콘솔을 찍는 등 디버깅 할 때 불편해지기 때문에 false로 바꿔줄 것이다.

 

 next.config.mjs 

 

 

 

App Router 버전 시작하기는 아래 게시글을 참고하세요!

https://dev-ini.tistory.com/271

 

 

728x90
저작자표시