[Next.js/14] 프로젝트 생성 및 구조 파악하기 #1

요즘 NextJS 는 정말 대세 기술이다. 리액트에서도 적극적으로 사용을 권장하는 만큼, React 에 대해 기본적인 지식이 쌓였다면 NextJS 를 공부해두는 것을 추천한다.

SPA 을 중심으로 핫했던 CSR 기반 방식에서 Server component를 제공하여 SSR 을 혼합해 사용할 수 있다는 점은 NextJS 의 가장 큰 매력일 것이다.

SSR을 지원함으로 JS 번들링 크기를 CSR 방식에 비하여 크게 줄여줄 수 있다.

그렇다면, 이번 포스팅에서는 NextJS의 프로젝트 초기 세팅에 대하여 다루어보도록 하겠다.

먼저 터미널에서 다음 명령어를 통해, NextJS 템플릿을 생성한다.

yarn create next-app

다음과 같은 추가 설치나 세팅할 옵션들을 고르게 하는데, 아래 이미지처럼 생성하였다.

프로젝트를 생성하면 다음과 같은 초기 구조를 가진다.

NextJS 14는 app router 기반이다. 따라서 app 폴더 하위로 폴더를 생성하고, 그 안에 page.tsx 나 layout.tsx을 만들어주면 해당 폴더 이름으로 라우팅이 된다.

예시로 app 폴더 하위에 다음과 같이 testPage를 생성해보자!

const TestPage =()=>{
    return(
        <div>
            여기는 TestPage 이다!!!
        </div>
    )
}
export default TestPage

이후 localhost:3000/testPage로 접속하면 다음과 같이 브라우저에 표시된 것을 볼 수 있다.