기본적으로 Next.js 는 리액트 기반 프레임워크이다.
그러므로 리액트 문법을 사용해준다.
app 폴더 안의 page.js 가 제일 메인으로 보이는 페이지이며
동일한 폴더의 globals.css 로 스타일 지정이 가능하다.
페이지 라우팅
넥스트는 자동 라우팅 기능으로 코드를 길게 작성해줄 필요가 없어진다.
- /list -> 상품 목록 페이지로 사용
app 폴더 안에 폴더명과 동일한 url 이 자동 생성
해당 url 에서 사용해줄 페이지의 정보가 담긴 page.js 를 생성해준다. (이름이 무조건 page.js 여야 함)
해당 page.js 파일은 리액트 문법에 맞게 작성해줘야 한다. (컴포넌트)
즉 정리하자면, app 폴더 안에 만들어지는 폴더들은 url 로 접근이 가능해지고,
이는 계층적으로 누적될 수 있어서 아래처럼 폴더가 쌓이면 localhost:3000/list/item 처럼 라우팅처리가 된다는 의미이다.
모든 페이지에 공통되는 요소
nav 바나 footer 등은 모든 페이지에서 보여야 한다. 이러한 요소는 app 폴더의 layout.js 에 넣어준다!
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>
<div className="navbar">
<Link href="/">Home</Link>
<Link href="/list">List</Link>
</div>
{children} // page.js 가 들어감
</body>
</html>
)
}이처럼 layout.js 는 page.js 를 크게 감싸는 형태로 존재하므로 가능한 것
layout.js 의 작동 방식
layout.js 와 동등한 계층에 존재하는 page.js 를 감싼다
-> 상위 계층에 layout.js 가 있으면 바로 아래의 모든 요소들을 감싸준다 -> 반복
그러므로 페이지마다 반복적으로 보여줘야할 html 이 있으면 최상단 layout.js 에 만들어주면 편할 것이다.
물론 특정 페이지 안쪽에서 동일하게 보여줘야할 html 은 해당 계층과 동일한 위치에 layout.js 를 만들어주면 된다!
Next 에서 이미지 넣기
img 태그 를 사용, src 에 경로를 넣어줘야하는데 <- 기본적인 방법
public 폴더에 있는 것은 자동으로 사이트의 root 경로로 이동되므로 / 다음부터 경로를 작성해준다.
<img src={`/food${idx}.png`} alt='상품 이미지' className='food-img' />
Next에서 사용할 수 있고, 성능과 속도가 중요하다면 이미지 넣을 때 <Image /> 태그를 넣어준다.
import Image from 'next/image'해당 태그는 자동으로 이미지 lazy loading 과 사이즈 최적화, layout shift 방지를 해주게 된다고 한다.
layout shift 란, 이미지 로딩이 늦어져서 레이아웃이 원하는대로 되지 않는 것을 의미
그 다음, 원하는 이미지를 직접 파일 안에 import 시켜줘서 src에 넣어줘야 한다!
import food0 from '/public/food0.png'
import food1 from '/public/food1.png'
import food2 from '/public/food2.png'
//...
let 상품이미지 = [food0, food1, food2]
<Image src={상품이미지[idx]} alt='상품 이미지' className='food-img' />
다만, 다른 사이트에 올려둔 이미지를 Image 태그에 절대경로로 넣으려면
1. width, height 옵션을 넣어주거나
2. fill = true 넣고, 부모 div에 width나 height 를 조절해야 한다.
아래의 링크처럼 next.config.js에 images 속성의 세팅을 따로 추가해줘야 하므로, img 태그를 쓰는 것이 더 편할 수 있음
https://nextjs.org/docs/app/building-your-application/optimizing/images#remote-images
Optimizing: Images | Next.js
Using App Router Features available in /app
nextjs.org
Next.js 의 컴포넌트 종류
- server component
- 컴포넌트를 아무 곳에 대충 만드는 것들이 해당 됨
- html 에 자바스크립트 기능 넣기 불가 ----> onClick 같은 속성이나 useState, useEffect 등도 사용 불가!
- 로딩 속도가 빠름(자바스크립트 기능이 없기에)
- SEO 이점에 유리 - SSR 처리
- client component
- 'use client' 라고 컴포넌트의 맨 위에 기재하고 만드는 컴포넌트가 해당 됨
- 자바스크립트 기능 넣기 가능! -> 보통 알고 있는 리액트 컴포넌트처럼 사용이 가능
- CSR 처리로 됨 -> 즉 hydration 를 거치고 자바스크립트 기능이 있어서 로딩 속도가 느림.
hydration : html 유저에게 보낸 후, 자바스크립트로 html 을 다시 읽고 분석하는 일
큰 페이지 자체는 server component 로, js 기능이 필요한 작은 단위의 컴포넌트는 client component 로!
컴포넌트간 props 전달 => 함수의 파라미터와 유사한 용도
부모 -> 자식 컴포넌트 간 props 전달은 가능,
자식 -> 부모 X
자식 1 -> 자식 2 X
보통 데이터 요청은 fecth 나 axious 를 사용하는데, Nextjs 에선 같은 데이터 요청이 여러 컴포넌트에서 일어나게 되면
자동으로 1개로 압축해준다 -> deduplication 기능
기능 공부 겸 간단하게 상품 페이지를 구현했다~ 다음은 DB 와 Next로 게시판을 만들어 볼 것이다.
'Web Study > Next.js' 카테고리의 다른 글
| 코딩애플 - 배포와 최적화에 대해, 회원가입에 대한 기초 (0) | 2023.06.28 |
|---|---|
| 코딩애플 - Next.js 로 게시판 수정/삭제 구현 (0) | 2023.06.27 |
| 코딩애플 - Nextjs 로 게시판 글 작성하기 (1) | 2023.06.25 |
| 코딩애플 - Next.js 에서 MongoDB 연결하기 (0) | 2023.06.24 |
| 코딩애플 Next.js, 개발 환경 세팅하기 (0) | 2023.06.22 |
