๐ NEXT JS 13 ๋ณ๊ฒฝ์
/pages ํด๋
๋ณ๊ฒฝ์
/pages
ใด test/
ใด index.tsx <- /test
ใด page.tsx <- /text/page
ใด some.tsx <- /test/some
๋ณ๊ฒฝํ
/app
ใด test/
ใด index.tsx <- ์ ๊ทผ๋ถ๊ฐ
ใด page.tsx <- /text
ใด some.tsx <- ์ ๊ทผ๋ถ๊ฐ
app ๋๋ ํ ๋ฆฌ ๋ด์ ๋ค์ํ ํ์ผ ์ถ๊ฐ
page.tsx : ๊ฒฝ๋ก์ ๊ณ ์ ํ UI๋ฅผ ์ ์ํ๋ ๋ฐ ์ฌ์ฉ๋๋ ํ์ผ์ ๋๋ค. ํ์ด์ง๋ ๊ฒฝ๋ก์ ๋ฆฌํ๋ฅผ ๋ํ๋ด๋ฉฐ ๊ฒฝ๋ก์ ์ก์ธ์คํ๋ ค๋ฉด ํ์ํฉ๋๋ค.
layout.tsx : ์ฌ๋ฌ ํ์ด์ง์์ ๊ณต์ ๋๋ UI๋ฅผ ์ ์ํ๋ ๋ฐ ์ฌ์ฉ๋๋ ํ์ผ์ ๋๋ค. ๋ ์ด์์์ ๋ค๋ฅธ ๋ ์ด์์์ด๋ ํ์ด์ง๋ฅผ ์์์ผ๋ก ๋ฐ์๋ค์ ๋๋ค. ๋ ์ด์์์ ์ค์ฒฉํ์ฌ ์ค์ฒฉ ๊ฒฝ๋ก๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค.
loading.tsx : ์ฑ์ ํน์ ๋ถ๋ถ์ ๋ํ ๋ก๋ฉ UI๋ฅผ ์์ฑํ๋ ๋ฐ ์ฌ์ฉ๋๋ ์ ํ์ ํ์ผ์ ๋๋ค. React Suspense Boundary์์ ํ์ด์ง ๋๋ ํ์ ๋ ์ด์์์ ์๋์ผ๋ก ๋ํํ์ฌ ์ฒซ ๋ฒ์งธ ๋ก๋ ์ ๋ฐ ํ์ ๊ฒฝ๋ก ์ฌ์ด๋ฅผ ํ์ํ ๋ ๋ก๋ ๊ตฌ์ฑ ์์๋ฅผ ์ฆ์ ํ์ํฉ๋๋ค.
error.tsx : ์ค๋ฅ๋ฅผ ์ฑ์ ํน์ ๋ถ๋ถ์ผ๋ก ๊ฒฉ๋ฆฌํ๊ณ ํน์ ์ค๋ฅ ์ ๋ณด๋ฅผ ํ์ํ๊ณ ์ค๋ฅ ๋ณต๊ตฌ๋ฅผ ์๋ํ๋ ๊ธฐ๋ฅ์ ์ฌ์ฉ๋๋ ์ ํ์ ํ์ผ์ ๋๋ค. React Error Boundary์์ ํ์ด์ง ๋๋ ํ์ ๋ ์ด์์์ ์๋์ผ๋ก ๋ํํฉ๋๋ค. ํ์ ํธ๋ฆฌ์์ ์ค๋ฅ๊ฐ ๋ฐ๊ฒฌ๋ ๋๋ง๋ค ์ค๋ฅ ๊ตฌ์ฑ ์์๋ฅผ ํ์ํฉ๋๋ค.
template.tsx : ๋ ์ด์์๊ณผ ์ ์ฌํ์ง๋ง ํ์ ์ ๊ตฌ์ฑ ์์์ ์ ์ธ์คํด์ค๊ฐ ๋ง์ดํธ๋๊ณ ์ํ๊ฐ ๊ณต์ ๋์ง ์๋ ์ ํ์ ํ์ผ์ ๋๋ค. ๋ค์ด๊ฐ๊ธฐ/๋๊ฐ๊ธฐ ์ ๋๋ฉ์ด์ ๊ณผ ๊ฐ์ ๋์์ด ํ์ํ ๊ฒฝ์ฐ ํ ํ๋ฆฟ์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
head.tsx : ์ฃผ์ด์ง ๊ฒฝ๋ก์ ๋ํ <head> ํ๊ทธ์ ๋ด์ฉ์ ์ ์ํ๋ ๋ฐ ์ฌ์ฉ๋๋ ์ ํ์ ํ์ผ์ ๋๋ค.
์ด์ ๋ฒ์ ๋ค๊ณผ ๋ค๋ฅด๊ฒ page๊ฐ ์ฌ์ฉ๋์ด ๊ฐ๋จํ๊ฒ ๋ฒ์ up์ ํ ์๋ ์๊ณ ์ด์ ๋ฒ์ ๋ค์ด ๋ ๊ฑฐ์ ์์คํ ์ด ๋ ๊ฒ๊ฐ์
server component
app ํด๋ ์์ component๋ค์ด ๊ธฐ๋ณธ์ ์ผ๋ก react server component๊ฐ ๋๋ค
server component๋ server์์ ๋ ๋๋ง๋๋ component์ด๊ณ
client component๋ client์์ ๋ฐ์์ ๋ ๋๋ง๋๋ component์
๋ฒ๋ค๋ง ํด Turbo pack
Next 13 ๋ถํฐ๋ ๋ฒํ๋ง ํด๋ก turbo pack์ด ์ฌ์ฉ๋๋ค. webpack๋ณด๋ค 700๋ฐฐ ๋น ๋ฅด๋ค๊ณ ํจ(Vercel์์)