Next JS의 기본과 디렉토리의 구조에 대해서 알아보자 ! (feat. pages folder, public folder)

안녕하세요 !!! 

가장먼저 Next JS에 대해서 소개를 해야했는데 이제와서 하네요 ㅜㅜ 

늦었지만 !!! 간단하고도 쉽게 또 어떻게 쓰면 더 좋은지에 대해서 소개하려고 합니당 !!!! 

 

Next JS란?

 

Next.js는 React 기반 프런트 엔드 프레임 워크입니다. 성능, SEO 및 애플리케이션 개발의 효율적이며 ! 또한 Routing, Server Side Rendering(SSR), Static Site Generator(SSG), Image에 관한 기능이 미리 내장되어 있으므로 React와 같이 이러한 기능을 개별적으로 설치, 설정할 필요없이 설치 직후부터 사용할 수 있습니다!! 

현재도 진화를 계속하고 있어 버전을 올릴 때마다 기능이 확장되고 있습니다.

 

이렇습니다 !!! 

 

이번엔 그래서 !! Next JS의 디렉토리 구조에 대해서 알아보며 public, pages 폴더에 대해서도 알아보겠습니다 ! 

 

먼저 설치를 해줍시다 !!! ( 설치는 했다고 가정할건데 혹시 모르니 밑에 써둘게요 ! )

밑에는 자바스크립트 ! 

npx create-next-app@latest
# or
yarn create next-app

여기는 타입 스크립트 ! 

npx create-next-app@latest --typescript
# or
yarn create next-app --typescript

 

자 ! 설치를 하고 나서 모습입니다 !!! 타입스크립트를 까신분들은 pages 밑에 ts파일이 있을겁니다 ! 

.
┝ node_modules
┝ pages
│　┝ api
│　┝ _app.js
│　└ index.js
┝ public
┝ styles
┝ .gitignore
┝ package-lock.json
┝ package.json
┝ next.config.js
└ README.md

 

저는 참고로 타입스크립트로 설치를 해서 !!! ㅎㅎ 조금 다를수도 있습니다 ! 

자 그러면 디렉토리 구조를 좀 보면서 진행해보겠습니다 ! 

 

 pages : 페이지를 담당하는 컴포넌트(폴더구조로 url 결정)

 public  : 어플리케이션에 사용되는 정적 파일들

 

먼저 이 2가지에 대해서는 꼭 알아둡시다 !!! 

 

또한 !! components로 컴포넌트만 따로 모아두는것도 좋긴 좋아서 ! 이것도 써주시면 좋구요 !! 

그리고 저는 개인적으로 

src밑에 pages, components....등등등 작업하는 파일을 src에서 관리하고 싶었습니다 ! 이것에 대해서 조금 설정이 필요한데요 ? 잘 따라와주세요 ! 

사실 별거없습니다 !!! 

위에 사진 처럼 그냥 src밑에다가 pages폴더를 넣으면 끝입니다 ! 

대신에 ! 타입스크립트를 사용하시는분들은 아래사진처럼도 입력해주세요 !! 

 

자 ! 한번 index page를 열어볼까요??? 

index page는 아무것도 쓰지 않아도 나옵니다 ! '/' 이것과 똑같죠 ! 

 

간단하게 about 페이지를 만들어봤습니다 ! 

그럼 여기서 ! 

 

public

에 대해서 알아봅시다 !! 

여기에는 정적파일들이 들어갑니다 !! 이미지라던가 html파일같은 !!! 

전 회사에서 현재 플젝과 상관없는 html을 그냥 열고싶은 경우가 있었습니다 ! ( A라는 곳에서 우리 플젝 쪽 으로 왔을 때 html 페이지를 뿌리고 싶을 때 ! 아니면 리다이렉트를 시키고 나서 특정한 페이지(css는 사용하는 플젝과 전혀 관련없는)를 뿌리고 싶을 때  )

 

한번 테스트를 해볼까요? 정말 간단하게 만들었습니다 ! 

public / page / test.html

위에 처럼 만든 후 ! 

http://localhost:3000/page/test

먼저 위에처럼 접속해보세요 !! 보통 pages아래에 있으면 저런식으로 파일 확장자를 써주지 않아도 이동이 되는데 public안에 넣었을 땐 어떻게 될까요? 

404가 뜹니다 !!!! 참고로 next js에서는 404페이지도 자동으로 지원해줍니다 !! 거기다 custom도 할 수 있습니다 ! 

에러페이지에 대한 처리는 다음시간에 알아볼게요 !! 

 

그럼 public에 들어가려면 어떻게 해야할까요?? 그냥 파일이름을 다 써줍시다 ! 

http://localhost:3000/page/test.html

짠 ! 저렇게 접속이 가능하게 합니다 !! 

 

처음에 저도 next js를 진행하면서 public에서 html을 별로 안쓸거같았는데 ;; 특정한 페이지를 보여주는 경우가 있어서 저렇게 대응을 했습니다 !! 이미지같은것도 올려서 당연히 불러 올 수 있습니다 ! 

 

 

 

 

자 오늘은 여기까지입니다 ! 

다음시간에는 _app.js、_document.js에 대해서 알아보겠습니다 !