next.js

React 기반의 프론트와 백엔드 동시 개발이 가능한 풀스택 웹 애플리케이션 구축을 위한 프레임워크

라우팅, 렌더링, 최적화... 등등을 제공함으로써

개발자가 애플리케이션 구축에 집중할 수 있도록 도와준다

 

next.js는 SPA와 MPA를 섞음으로써

초기 화면을 만들어진 html를 MPA로 불러오고 => SPA 초기로딩 단점을 잡아줌

MPA 위에 SPA의 동적을 사용할 수 있게 한다 => MPA의 정적, 플로커현상 잡아줌

 

SPA와 MPA의 장점을 가져오고 잘 버무려서

서로의 단점이 보완되는 Next.js를 안 쓸 이유가 없다

 

npx create-next-app@latest
//이후 작명, 라이브러리 선택...

 

layout.js?

page.js는 layout.js 안에 포함된다

어떤 페이지에서든 page.js 위에 보여지는 화면이라고 보면 된다

이건 하위폴더에 있는 파일도 포함된다

상단바같이 항상 어디서든 맨 위에 보여지는 것을 그리는 용도

예시 (layout.js에 상단바 추가)

{children}은 page.js를 의미한다

 

하위폴더의 layout은 어떻게 작동하지? 

만약 layout.js가 포함된 폴더의 상위폴더에 layout.js가 있다면?

상위폴더의 layout 안에 해당 layout 안에 해당 page가 그려진다

 

위에서 말했 듯 layout은 어느 페이지를 가든 표시되는 파일이고

하위폴더에도 영향을 미친다고 했다

여기서 test폴더의 layout이 존재하는 상태다

abc폴더에서 화면을 그리면 어떻게 되나?

test/layout -> test/abc/layout 순으로 화면에 그려지게 되는거다

 

그럼 def폴더라면?

test/layout -> test/def/layout 가 되는거다

 

그럼 다른 폴더인 ghi에도 layout이 있는데 왜 안 그리지?

ghi파일은 abc나 def처럼 같은 위치에 있기 때문에

상위폴더도 하위폴더도 아니다 그래서 영향을 받지 않는다

 

이걸 활용해서 여러가지 레이아웃을 꾸밀 수 있게 된다

 

 

 

page.module.css?

next.js를 설치하고 app 폴더 안에 보이는 특이한 이름의 css 파일을 볼 수 있다

특정 페이지에서만 해당 CSS를 적용시키겠다는 파일이다

파일이름.module.css 라고 지정할 수 있다

 

 

 

routing (라우팅)

1. app 파일 안에 새 파일 생성(해당 파일 이름으로 URL경로 설정) ex) /list
2. 새 파일 안에 page.js 생성(무조건 page.js로 생성)
3. 내부는 자유롭게 react문법으로 코딩
4. /파일이름 으로 가면 페이지 확인 가능

/abc/efg 경로도 갈 수 있을까? YES

app/abc/efg까지 폴더를 생성하고

efg폴더에 page.js를 추가하면 된다