앞서 공부했던 next.js를 실제로 사용해보며 개념을 익혀본다.
Next.js 설치
create-next-app 패키지를 설치한다.
npx create-next-app
or
yarn create-next-app설치를 하면 여러가지 옵션을 선택할 수 있는데 다음과 같다.
- 프로젝트 이름 입력
- ESLINT 사용 설정
- 타입스크립트 사용 유무
- 테일윈드css 사용 유무
- 디텍토리를 사용 유무
- app 디렉토리 사용 유무
- 절대경로 사용 유무
이는 본인이 필요한 옵션을 선택하여 사용하면 될 것 같다.
서버 실행
설치 후 next 서버 실행 키워드는 다음과 같다
npm run dev
or
yarn dev파일 구조
프로젝트를 생성하면 다음과 같은 구조의 디텍토리가 생성된다.
- README.md
- next.config.js
- node_modules/
- package-lock.json
- package.json
- pages/
- _app.js
- api/
- hello.js
- index.js- public/
- favicon.ico
- vercel.svg- styles/
- Home.module.css
- globals.css
public 디텍토리는 모든 퍼블릭 페이지와 정적 콘텐츠가 있다. 예를 들면 이미지 파일, 컴파일된 CSS 스타일시트, 컴파일된 자바스크립트 파일, 폰트 등이 있다.
styles 디텍토리는 스타일시트를 넣으면 되는데, 필수는 아니다.
반드시 있어야 하는 디텍토리는 public와 pages 뿐이며 나머지는 사용자의 용도와 취향에 맞게 사용하면 되겠다.
또한 공용컴포넌트를 components 폴더 내부에 넣고 사용해도 된다. 이는 최상위 디텍토리에 필요한 디텍토리, 파일을 추가해도 Next.js 빌드 및 개발 프로세스에는 아무런 영향을 주지 않는다는것을 의미한다.
layout.tsx
layout.tsx 파일은 보통의 서비스의 헤더 같은 공통적인 부분을 제작하면 된다. {children} 부분에 다른 페이지들이 들어가기 때문에 layout.tsx는 페이지들을 감싸고 있는 것이라고 생각하면 된다.
automatic routing
Next.js는 아주 편리하게 라우팅을 할 수 있다! pages 폴더에 있는 파일이 해당 파일 이름으로 라우팅된다. 예를 들어 pages/page1.tsx 파일을 생성한다면 localhost:3000/page1 이 되는것이다!
파일의 상단에
import Link from "next/link";를 작성하고
<Link href="/board">게시판</Link>다음과 같이 작성하면 라우팅이 된다. 물론 board라는 폴더에 생성된 page.tsx파일이 존재해야한다.
