next.config.js νμΌμμ μ€λ₯κ° λμ μλμ κ°μ΄ eslintrc - extendsμ 'next/babel' μ€μ μ ν΄μ£ΌλκΉ μ€λ₯ ν΄κ²°!
π Parsing error : Cannot find module 'next/babel'
// .eslintrc.json
{
"extends": ["next/babel", "next/core-web-vitals"]
}
Reactμ νμ€ν νλ μμν¬
- Server-side rendering
- μ΄κΈ° λ λλ§ λ 미리 λ λλ§λ νμ΄μ§λ₯Ό κ°κ² λ¨
- κ±°λ₯ React μ±μλ μλ λ΄μ₯ νμ΄μ§ μ¬μ λ λλ§ κΈ°λ₯μ΄ ν΅μ¬ κΈ°λ₯!
βΒ React
: μ¬μ©μ μΈν°νμ΄μ€ ꡬμΆμ μν JavaScript λΌμ΄λΈλ¬λ¦¬
βΒ νλ μμν¬ & λΌμ΄λΈλ¬λ¦¬ μ°¨μ΄μ : νλ μμν¬ κ·λͺ¨κ° λ ν¬λ€ (λ λ§μ κΈ°λ₯μ κ°μ§κ³ μμ)
- Next νλ‘μ νΈμ public ν΄λ λ΄μλ
index.html
νμΌμ΄ μ‘΄μ¬νμ§ μλλ€.
- π€·ββοΈΒ why? NextJSμλ λ΄μ₯λ μ¬μ λ λλ§μ΄ ν¬ν¨λμ΄ μκΈ° λλ¬Έ
- μμ²μ΄ μλ²λ‘ λλ¬ν λ SPAμ λ¨μΌ νμ΄μ§κ° λμ μΌλ‘ μ¬μ λ λλ§μ΄ λμ΄ μ½ν μΈ λ₯Ό ν¬ν¨ν μ΄κΈ° νμ΄μ§λ₯Ό λ°νν¨
# Next.js νμ μμ±
npx create-next-app
Ok to proceed? (y) y
β What is your project named?
β Would you like to use TypeScript with this project? No / Yes
β Would you like to use ESLint with this project? No / Yes
# server μ€ν
npm run dev
/pages
L index.js -> /
L about.js -> /about
L /products
L index.js -> /products
L [id].js -> /products/1
[id].js: λμ κ²½λ‘λ₯Ό μΆκ°νλ νκΈ°λ²
νμΌ μ΄λ¦μ κ²½λ‘λ‘ μ§μ νλλ° index.jsλ μμΈ!
index.jsλ νμ¬ μν ν΄λλ₯Ό μν λΌμ°νΈ κ²½λ‘λ‘ κ°μ νκ² λ νΉλ³ν νμΌ
index.js
: νμ μ§μ λ ν΄λμ λ£¨νΈ νμ΄μ§Next.js
: νμΌ κΈ°λ° λΌμ°ν
boilerplate code
(λ³νμμ΄ μ¬λ¬ κ΅°λ°μμ λ°λ³΅λλ μ½λ) βfile + folder
ꡬ쑰 β λΌμ°νΈμ μν₯μ λ―ΈμΉ¨<Link/>
μ»΄ν¬λνΈ μ¬μ©React + react-router
: μ½λ κΈ°λ° λΌμ°ν
<Route/>
, β¦)