๐Ÿธminzzi
Minzzi์•ผ
๐Ÿธminzzi
์ „์ฒด ๋ฐฉ๋ฌธ์ž
์˜ค๋Š˜
์–ด์ œ
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (132)
    • ์˜ค๋ฅ˜ํ•ด๊ฒฐ (14)
    • FE (36)
      • Next.js (17)
      • React (4)
      • React Native (0)
      • TypeScript (1)
      • JavaScript (14)
    • BE (0)
      • Nest.js (0)
    • ๋ฐ๋ธŒ์ฝ”์Šค (7)
    • ์›น ํ”„๋กœ์ ํŠธ (5)
    • CS (28)
      • Algorithm (5)
      • Python (4)
      • C++ (2)
      • Operating System (4)
      • Computer Networking (3)
      • Data Structure (1)
      • Machine Learning (3)
      • Tip (6)
    • Github (4)
    • Flutter (3)
      • ํ”„๋กœ์ ํŠธ (3)
    • Private (3)
      • ํšŒ๊ณ  (7)
      • ๋ฉด์ ‘ (17)
    • ๊ฐœ๋ฐœ๋„์„œ (7)

๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

  • ํ™ˆ

๊ณต์ง€์‚ฌํ•ญ

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • ๋ ‰์‹œ์ปฌ
  • ํŠธ๋Ÿฌ๋ธ”์ŠˆํŒ…
  • ์›์‹œํƒ€์ž…
  • ํ‹ฐ์Šคํ† ๋ฆฌ์ฑŒ๋ฆฐ์ง€
  • ์‹คํ–‰์ปจํ…์ŠคํŠธ
  • ๋ฉด์ ‘
  • ํ˜ธ์ด์ŠคํŒ…
  • reflow
  • SSR
  • ์‹คํ–‰์ปจํƒ์ŠคํŠธ
  • ๋ชจ๋˜๋ฆฌ์•กํŠธ๋”ฅ๋‹ค์ด๋ธŒ
  • ํž™์˜์—ญ
  • ์ด๋ฏธ์ง€ ์ตœ์ ํ™”
  • ์ฝœ์Šคํƒ
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ
  • layout shift
  • next.js
  • ์˜ค๋ธ”์™„
  • ์ด๋ฒคํŠธ๋ฃจํ”„
  • react

์ตœ๊ทผ ๋Œ“๊ธ€

์ตœ๊ทผ ๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌ

hELLO ยท Designed By ์ •์ƒ์šฐ.
๐Ÿธminzzi
FE/Next.js

[Next.js] app router - ๋ฐ์ดํ„ฐ ํŽ˜์นญ

FE/Next.js

[Next.js] app router - ๋ฐ์ดํ„ฐ ํŽ˜์นญ

2025. 5. 18. 12:41
ํ•œ ์ž… ํฌ๊ธฐ๋กœ ์ž˜๋ผ๋จน๋Š” Next.js ํ•™์Šต์ •๋ฆฌ์šฉ์ž…๋‹ˆ๋‹ค. 
4.1) ์•ฑ ๋ผ์šฐํ„ฐ์˜ ๋ฐ์ดํ„ฐ ํŽ˜์นญ

 

Page Router์˜ ๋ฐ์ดํ„ฐ ํŽ˜์นญ

Parge Router์—์„œ๋Š” ์„œ๋ฒ„๋‚˜ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๋กœ๋ถ€ํ„ฐ ๋ฐ์ดํ„ฐ๋ฅผ ํŽ˜์นญํ•˜๊ธฐ ์œ„ํ•ด์„œ ํŠน์ • ํ•จ์ˆ˜๋“ค์„ ์‚ฌ์šฉํ–ˆ๋‹ค.

(GetServerSideProps, GetStaticProps, GetStaticPath ๋“ฑ)

 

์ € ํ•จ์ˆ˜๋“ค์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์„œ page component์— ๋ฐ์ดํ„ฐ๋ฅผ Props๋กœ ์ „๋‹ฌํ•ด์ฃผ์—ˆ๋‹ค.

page router์—์„œ๋Š” ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ๊ฐ€ ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ ์ด๊ธฐ ๋•Œ๋ฌธ์— page component ์—ญ์‹œ ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋‹ค์‹œ ์‹คํ–‰๋˜๊ธฐ ๋•Œ๋ฌธ์— ์ €๋Ÿฌํ•œ ํ•จ์ˆ˜๋“ค์„ page component์— ์ž‘์„ฑํ•  ์ˆ˜ ์—†์—ˆ๋‹ค.

page router์˜ data fetching์˜ ๋‹จ์ 

ํŽ˜์ด์ง€ ์ปดํฌ๋„ŒํŠธ์—๊ฒŒ๋งŒ ๋ฐ์ดํ„ฐ๊ฐ€ props๋กœ ์ „๋‹ฌ๋˜๊ธฐ ๋•Œ๋ฌธ์— ํ•ด๋‹น ๋ฐ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ž์‹ ์ปดํฌ๋„ŒํŠธ์—๊ฒŒ props๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๋ชจ๋‘ ๋ณด๋‚ด์ค˜์•ผํ•˜๋Š” ๋ฌธ์ œ์ ์ด ์žˆ๋‹ค.

 

ํ•˜์ง€๋งŒ App Router์—์„œ๋Š” ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ถ”๊ฐ€๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ์œ„์™€ ๊ฐ™์€ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค.

App Router์˜ ๋ฐ์ดํ„ฐ ํŽ˜์นญ

App Router์—์„œ๋Š” ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ด์šฉํ•˜์—ฌ page component์—์„œ๋„ ๋ฐ์ดํ„ฐ ํŽ˜์นญ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

์˜ค์ง ์„œ๋ฒ„์—์„œ๋งŒ ์‹คํ–‰๋˜๊ธฐ ๋•Œ๋ฌธ์— ํ•จ์ˆ˜์— async ํ‚ค์›Œ๋“œ๋ฅผ ๋ถ™์ด๋Š”๊ฒŒ ๊ฐ€๋Šฅํ•œ๋ฐ, ๋”ฐ๋ผ์„œ ์ปดํฌ๋„ŒํŠธ ํ•จ์ˆ˜๋ฅผ ๋น„๋™๊ธฐ ํ•จ์ˆ˜๋กœ ๋งŒ๋“ค๊ณ  ๋‚ด๋ถ€์—์„œ await ํ‚ค์›Œ๋“œ์™€ fetch ๋ฉ”์„œ๋“œ๋ฅผ ํ†ตํ•ด ๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋Ÿฌ์˜ฌ ์ˆ˜ ์žˆ๋‹ค.

export async function Page(props) {
const data = await fetch('...');
return <div>...</div>
}

 

์ด๋กœ์จ page router์—์„œ ์‚ฌ์šฉํ•˜๋˜ GetServerSideProps, GetStaticProps, GetStaticPath ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ ๋„ ๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋Ÿฌ์˜ฌ ์ˆ˜ ์žˆ๊ฒŒ ๋œ ๊ฒƒ์ด๋‹ค. ๋ฐ์ดํ„ฐ๋ฅผ ํ•„์š”๋กœํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ์—์„œ ์ง์ ‘ ๋ฐ์ดํ„ฐ๋ฅผ ํŽ˜์นญํ•ด์˜ฌ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— props๋กœ ๋„˜๊ฒจ์ค€๋‹ค๋˜๊ฐ€ ๊ทธ๋Ÿฌ์ง€ ์•Š์•„๋„ ๊ดœ์ฐฎ๋‹ค.

// ์‚ฌ์šฉ์˜ˆ์‹œ
async function AllBooks() {
const response = await fetch(
`${process.env.NEXT_PUBLIC_API_SERBER_URL}/book`
);
if (!response.ok) {
return <div>์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค ...</div>;
}
const allBooks: BookData[] = await response.json();
return (
<div>
{allBooks.map((book) => (
<BookItem key={book.id} {...book} />
))}
</div>
);
}
import BookItem from "@/components/book-item";
import { BookData } from "@/types";
export default async function Page({
searchParams,
}: {
searchParams: { q?: string };
}) {
const response = await fetch(
`${process.env.NEXT_PUBLIC_API_SERBER_URL}/book/search?q=${searchParams.q}`
);
if (!response.ok) {
return <div>์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค ...</div>;
}
const books: BookData[] = await response.json();
return (
<div>
{books.map((book) => (
<BookItem key={book.id} {...book} />
))}
</div>
);
}
import { BookData } from "@/types";
import style from "./page.module.css";
export default async function Page({
params,
}: {
params: { id: string | string[] };
}) {
const response = await fetch(
`${process.env.NEXT_PUBLIC_API_SERBER_URL}/book/${params.id}`
);
if (!response.ok) {
return <div>์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค ...</div>;
}
const bookData: BookData = await response.json();
const { title, subTitle, description, author, publisher, coverImgUrl } =
bookData;
return (
<div className={style.container}>
<div
className={style.cover_img_container}
style={{ backgroundImage: `url('${coverImgUrl}')` }}
>
<img src={coverImgUrl} />
</div>
<div className={style.title}>{title}</div>
<div className={style.subTitle}>{subTitle}</div>
<div className={style.author}>
{author} | {publisher}
</div>
<div className={style.description}>{description}</div>
</div>
);
}
์ €์ž‘์žํ‘œ์‹œ (์ƒˆ์ฐฝ์—ด๋ฆผ)

'FE > Next.js' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[Next.js] App Router - ๋„ค๋น„๊ฒŒ์ดํŒ…  (0) 2025.05.08
[Next.js] ๋ฆฌ์•กํŠธ ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ  (2) 2025.05.07
[Next.js] App Router - ๋ ˆ์ด์•„์›ƒ  (0) 2025.05.06
[Next.js] App Router - ํŽ˜์ด์ง€ ๋ผ์šฐํŒ…  (0) 2025.05.06
[Next.js] Page Router ์žฅ๋‹จ์   (0) 2025.05.06
  • Page Router์˜ ๋ฐ์ดํ„ฐ ํŽ˜์นญ
  • App Router์˜ ๋ฐ์ดํ„ฐ ํŽ˜์นญ
'FE/Next.js' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • [Next.js] App Router - ๋„ค๋น„๊ฒŒ์ดํŒ…
  • [Next.js] ๋ฆฌ์•กํŠธ ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ
  • [Next.js] App Router - ๋ ˆ์ด์•„์›ƒ
  • [Next.js] App Router - ํŽ˜์ด์ง€ ๋ผ์šฐํŒ…
๐Ÿธminzzi
๐Ÿธminzzi

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”

๋‹จ์ถ•ํ‚ค

๋‚ด ๋ธ”๋กœ๊ทธ

๋‚ด ๋ธ”๋กœ๊ทธ - ๊ด€๋ฆฌ์ž ํ™ˆ ์ „ํ™˜
Q
Q
์ƒˆ ๊ธ€ ์“ฐ๊ธฐ
W
W

๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€

๊ธ€ ์ˆ˜์ • (๊ถŒํ•œ ์žˆ๋Š” ๊ฒฝ์šฐ)
E
E
๋Œ“๊ธ€ ์˜์—ญ์œผ๋กœ ์ด๋™
C
C

๋ชจ๋“  ์˜์—ญ

์ด ํŽ˜์ด์ง€์˜ URL ๋ณต์‚ฌ
S
S
๋งจ ์œ„๋กœ ์ด๋™
T
T
ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ ์ด๋™
H
H
๋‹จ์ถ•ํ‚ค ์•ˆ๋‚ด
Shift + /
โ‡ง + /

* ๋‹จ์ถ•ํ‚ค๋Š” ํ•œ๊ธ€/์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž๋กœ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ํ‹ฐ์Šคํ† ๋ฆฌ ๊ธฐ๋ณธ ๋„๋ฉ”์ธ์—์„œ๋งŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.