์๋ก์ด ํ๋ ์์ํฌ next.js๋ฅผ ๋ฐฐ์๋ณด๋ ค๊ณ ํ๋ค.
์? client-side rendering ๋ง๊ณ server-side rendering๊ฐ ์ ํํ๊ณ ์๊ธฐ ๋๋ฌธ์ด๋ผ๊ณ .
client-side rendering : ๋ธ๋ผ์ฐ์ ์์ html์ ์ค์๊ฐ์ผ๋ก ๋ง๋ฆ
server-side rendering : ์๋ฒ์์ html์ ๋ฏธ๋ฆฌ ๋ง๋ค์ด ๋ณด๋ด ์ค
client-side rendering์ ๊ฒ์์๋ ์ ๋
ธ์ถ๋์ง ์๊ณ , ํ์ด์ง๋ฅผ ๋ถ๋ฌ์ค๋ ๋ฐ์ ์๊ฐ์ด ์ ๋ฒ ๊ฑธ๋ ค์ ๋์ด ๋ง์ด ์์๋๋ ํธ์ด๋ผ ํ๋ค
๊ทธ๋์ server-side rendering ์ผ๋ก ๊ฐ์ํ๋ ์ถ์ธ๋ผ๊ณ ํ๋ ์ด์ฌํ ๊ณต๋ถํด๋ณด์
ํ๊ฒฝ ์ธํ ๐ช
npx create-next-app@latest --experimental-app
์ํ๋ ํด๋์์ ์๋ฅผ ๋ณต์ฌํด ์คํ์์ผ์ฃผ๋ฉด ๋๋ค..
๋ฌผ์ด๋ณด๋ ๊ฒ๋ ์ฐธ๋ง ๋ง๋ค
ํญ์ด๋ ๋ฐฉํฅํค ์ด์ฉํด์ ์ํฐ~ ๋๋ฌ์ฃผ๋ฉด์ ์ ํํด์ฃผ๋ฉด ๋จ.
๋ง๋ ํด๋๋ก ๋ค์ด๊ฐ์ npm install ๋ ํด์ค๋ค.
page.js๊ฐ ๋ฉ์ธ ํ์ด์ง๊ณ
npm run dev
๋ก ์คํ์์ผ ๋ฐ๋ก๋ฐ๋ก ํ์ธํด ๋ณผ ์ ์๋ค
์ด์ฐจํผ ๋น์ธ ๊ฑฐ์ง๋ง ๊ฐ์ง๋๋๊ตฌ๋ง..
๊ทธ๋ฆฌ๊ณ ์์ ๊ทน ์ต์ ๋ฒ์ ์ ์๋ฌ๊ฐ ๋ง์ด ๋ ์ ์์ผ๋ package.json์์ ์กฐ๊ธ ๋ค์ด์์ผ์ค๋ค.
์ฌ๊ธฐ๊น์ง ํ๋ฉด ์ธํ ์ ๋!
๋ผ์ฐํ ๐
๊ธฐ์ด ์ธํ
๋ฆฌ์กํธ ๊ธฐ๋ณธ ๋ฌธ๋ฒ์ ์ด์ฉํด ์ฒซ ํ์ด์ง๋ฅผ ์ผ๋จ ์ธํ ํ๋ค.
์๋ ๋ผ์ฐํ ๐งฒ
next.js ๋ ๋ฆฌ์กํธ์์ ์ฐ๋ฏ์ด
๋ญ ํ๋ฉด ์ด๊ฑฐ ์๋์ผ๋ก ๋งํฌ ๋ง๋ค์ด์ค๋ผ~ ํ๊ณ ์ธํ
ํ ํ์๊ฐ ์๋ค.
์ด๋ ๊ฒ๋ง ์ธํ ํด์ฃผ๋ฉด ์์์ /list ๋ฅผ ์ ๋ ฅํ์์ ์ ํ์ด์ง๋ฅผ ์ฐพ์๊ฐ๋ค.
๋ผ์ฐํธ ๊ตฌ์ฑ
์ผ๋ฐ์ ์ธ ๋ผ์ฐํธ
- pages/book.js -> /book
- pages/book/index.js -> /book
- pages/index.js -> /
์ค์ฒฉ ๋ผ์ฐํธ
- pages/book/essay/index.js -> /book/essay
- pages/book/novel/like.js -> /book/novel/like
- pages/book/novel.js -> /book/novel
๋์ ๋ผ์ฐํธ
- pages/book/[genre]/index.js -> /book/:genre
- pages/book/[genre]/all.js -> /book/:genre/all
- pages/book/[...id].js -> /book/* (book/1/like/10)
- pages/book/[id].js -> /book/:id
๋งํฌ ์ฌ์ฉํ๊ธฐ
import Link from "next/link";
...
<Link href="/">HOME</Link>
<Link href="/list">LIST</Link>์๋จ๋ฐ (layout.js)
<div className="navbar">
<Link href="/">HOME</Link>
<Link href="/list">LIST</Link>
</div>๋ผ๋ ๋๋ต์ ์๋จ๋ฐ๋ฅผ page.js์ ๋ฃ์ด์ฃผ์๋ค.
๊ทผ๋ฐ ์ด๋ ๊ฒ ํ๋ฉด ๋๋ฌด๋ ๋น์ฐํ ๋ค๋ฅธ ํ์ด์ง์์ ์๋จ๋ฐ๊ฐ ๋ณด์ด์ง ์๋๋ค.
์ด ๋ถ๋ถ์ ์ผ์ผ์ด ๋ณต๋ถํด์ฃผ๋ฉด ๋๊ฒ ์ง๋ง,, ๋ง์ฝ ํ์ด์ง๊ฐ 10๊ฐ๊ฐ ๋์ด๊ฐ๋ค๋ฉด ๋ญํ๋ฌ ๊ทธ๋ ๊ฒ ํ๋!
layout.js
์ด๋ด ๋ ์ด์ฉํด์ฃผ๋ ๊ฒ์ด 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}
</body>
</html>
);
}๊ฐ๋จํ body ์ฌ์ด์ ๋ฃ์ด์ฃผ๋ฉด, ์ด๋ ํ์ด์ง๋ฅผ ์ด๋ํ๋ ์๋จ์ ๊ณ ์ ๋๋ ๋ชจ์ต์ ๋ณผ ์ ์๋ค.
component๋ก ๋ฐ๋ก ๊ด๋ฆฌํ๋ ๊ฒ๊ณผ ๋น์ทํ์ง๋ง ์ฌ์ด ๋๋??
์ด๋ฏธ์ง ์ฝ์ ๐
<Image />
๋๋ ํ ๋ฆฌ ์ฌ์ง
import Image from 'next/image'
export default function Home() {
return(
<div>
<Image />
<div/>
)} ๋ฌผ๋ก ๋ฆฌ์กํธ์์ ์ฐ๋ฏ <img src~~/> ์จ๋ ๋๋ค.
public ํด๋ ์์ ์๋ ์ฌ์ง์ ์ฐ๋ ค๋ฉด /๋ถํฐ ์์ํ๋ฉด ๋จ.
๊ทผ๋ฐ ์ฑ๋ฅ๊ณผ ์๋๊ฐ ์ค์ํ๋ค๋ฉด ์ด๋ฏธ์ง ๋ฃ์ ๋ ํ๊ทธ ์.
๊ทธ๋ผ ์๋์ผ๋ก ์ด๋ฏธ์ง lazy loading & ์ฌ์ด์ฆ ์ต์ ํ & layout shift ๋ฐฉ์ง๋ฅผ ํด์ค๋ค.
์ฐธ๊ณ : https://scarlett-dev.gitbook.io/all/it/lazy-loading
https://sangwonny.tistory.com/57
import Image from 'next/image'
import ์ด๋ฏธ์ง from './food0.png'
export default function Home() {
return(
<div>
<Image src={์ด๋ฏธ์ง} alt="์ค๋ช
"/>
<div/>
)} ์ด๋ฏธ์ง๋ฅผ ์๋จ์์ import ํด์จ ๋ค์ ๊ทธ๊ฑธ ๋ฃ์ด์ผ ํ๋ค.
์ฌ์ด์ฆ๋ ์คํ์ผ์ ์กฐ์ ํ๋ ค๋ฉด ์๋ค์ํผ<Image /> ๋ด ์์ width="100px" ์๋ฐ ์์ผ๋ก ์ถ๊ฐํด์ฃผ๋ฉด ๋จ
์ธ๋ถ๋งํฌ์ฌ์ง
import Image from 'next/image'
export default function Home() {
return(
<div>
<Image src="https://s3.amazonaws.com/my-bucket/profile.png" width="500" height="500"/>
</div>
)} ๋ด๊ฐ ๋ค๋ฅธ ์ฌ์ดํธ์ ์ฌ๋ ค๋์ ์ฌ์ง์ ๊ฐ์ ธ์ค๋ ค๋ฉด
- width, height ์ต์ ์ ๋ฃ์ด์ฃผ์ด์ผ ํจ
- fill="true" ์ด๊ฑฐ ๋์ ๋ฃ๊ณ ๋ถ๋ชจ <div>๊ฐ width, height๋ฅผ ๋์ ์กฐ์ ํด๋ ๋จ๋ด ์ ์ฅ์๊ฐ ์๋ ๋ค๋ฅธ URL์์ ๊ฐ์ ธ์ค๊ณ ์ถ์ผ๋ฉด ๋ฐ๋ก ์
ํ
๋ ํด๋์ผํฉ๋๋ค.
https://beta.nextjs.org/docs/optimizing/images#remote-images
๊ทธ๋ฌ๋๊น,
<div>
<Image src="https://cdn.pixabay.com/photo/2021/10/14/03/19/tomato-6707992__340.png"
width="500"
height="500"
/>
</div>์ด๋ฐ pixbay์ ์๋ ์ฌ์ง ํ๋๋ฅผ ๋ถ๋ฌ์ค๋ ค๋ฉด, ์ด๋ ๊ฒ๋ง ์ ์ผ๋ฉด ์๋๋ค.
์ ์ ํ์ผ์ ์ ๊ทผ์ ์๊ด์์ง๋ง ๋๋ ์ธ๋ถ ์๋ฒ์ ์ด๋ฏธ์ง๋ฅผ ๊ฐ์ ธ์์ผํ๊ธฐ ๋๋ฌธ์ ๋๋ฉ์ธ ์ค์ ์ด ํ์ํจ
Error: Invalid src prop (https://cdn.pixabay.com/photo/2021/10/14/03/19/tomato-6707992__340.png) on next/image, hostname "cdn.pixabay.com" is not configured under images in your next.config.js
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host
๊ท์ฐฎ์ผ๋ ์ธ๋ถ ์ฌ์ดํธ ์ด๋ฏธ์ง๋ค์ ๊ทธ๋ฅ <Image>๋ง๊ณ <img> ํ๊ทธ ์ฐ๋๊ฒ ํธํจ
๊ฐ๋จํ map
{grocery.map((a, i) => {
return (
<div className="food" key={i}>
<img src={"food" + i + ".png"} width={50} />
{a} $40
</div>
);
})}๋น์ฐํ ๋ฐฑํฑ์ ์ด์ฉํด๋ ๋๋ค (`food{i}.png`)
๊ฐ๋จํ map ์์!
์ฌ๋ด ๐ฌ
์๋ฌ๋ฅผ ๋ฃ์ด๋ดค๋๋ฐ ์๋ฌํ์๋ ๊ท์ฝ๊ฒ ๋๋ค... ใ
_ใ
์ด์ ์ ๊ท์ฝ๊ฒ ์ง?
'TIL > Next.js' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| Next.js | ๋ค์ด๋ฒ ๋ก๊ทธ์ธ ๊ตฌํํ๊ธฐ (๋ค์๋ก~) (0) | 2024.03.06 |
|---|---|
| Next.js | ๊ตฌ๊ธ ๋ก๊ทธ์ธ ๊ตฌํํ๊ธฐ (0) | 2024.03.05 |
| Next.js | ์นด์นด์ค ๋ก๊ทธ์ธ ๊ตฌํํ๊ธฐ (1) | 2024.02.27 |
| [TIL] Next.js 13 ๋ผ์ฐํ (4) | 2023.05.27 |
| Next.js ๊ธฐ์ด 2 - component, props, state (0) | 2023.05.20 |
