안녕하세요 !!!
가장먼저 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에 대해서 알아보겠습니다 !
'IT관련 > NextJS' 카테고리의 다른 글
Next js에서는 a태그대신에 Link태그를 사용하자 ! (0) | 2022.05.19 |
---|---|
document is not defined 에러가 뭐야? 해결법 !! (feat. window is not defined) (0) | 2022.04.12 |
Next JS의 기본!! _app.js, _document.js에 대해서 알아보자 ! (2) | 2022.03.30 |
Next JS가 풀스택이 가능한이유 ! (feat. api, prisma, planetscale) (0) | 2022.03.29 |