๐ป DEV/NextJS11 [NEXT.js] 5. Link ์ปดํฌ๋ํธ ์ฌ์ฉ ์ด์ ( new- link ) 1. ์ ์ & ํน์ฑ 2. Nextjs 13 ๋ฒ์ ์ ๋ฐ์ดํธ ํ ์ฌ์ฉ๋ฒ์์ธ 1. ์ ์ & ํน์ฑ๊ธฐ์กด์ ํ๊ทธ๋ ํ์์ ํ๊ทธ๋ฅผ ํฌํจํด์ ์์ฑํด์ผ ํ์ต๋๋ค.๊ทธ๋ฌ๋, Nextjs 13 ๋ฒ์ ์ผ๋ก์ ์ ๋ฐ์ดํธ ์ดํ ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ง ์์๋ ๋๋ ๊ฒ์ผ๋ก ๋ณ๊ฒฝ ๋์ต๋๋ค. next/link : ํ๊ทธ ์์ด ์ฌ์ฉ ๊ฐ๋ฅ # ๊ธฐ์กด๋ฐฉ์ Home # --------------------------# ๋ณํ๋ ๋ฐฉ์ Home. 2. Nextjs 13 ๋ฒ์ ์ ๋ฐ์ดํธ ํ ์ฌ์ฉ๋ฒ npx @next/codemod new-link . - codemod ๋ฅผ ์คํํด new-link๋ฅผ ์ค์นํ๊ณ , ์ ๋ฐ์ดํธ ๋. ๋ฒ์ ์ nextjs13 Link ํ๊ทธ๋ฅผ ์ฌ์ฉํ๊ฒ ๋๋ค. next/link 2024. 6. 19. [NEXT.js 14] 5. Layout(feat. { children }: { children: ReactNode }) props Layout 1. ์ ์ & ํน์ฑ 2. ์ฝ๋ ์์ 3. ๊ด๋ จ ์๋ฌ์์ธ 1. ์ ์ & ํน์ฑNext.js ์๋ Layout ์ปดํฌ๋ํธ๊ฐ ์กด์ฌํ๊ณ ์ด๋ ์ฌ๋ฌ ๊ฒฝ๋ก๊ฐ์ ๊ณต์ ๋๋ UI์ ๋๋ค. Layout ์ปดํฌ๋ํธ๋- ํ์ผ์์ React ๊ตฌ์ฑ์์๋ฅผ ๋ด๋ณด๋ด๋๋ก ์ ์ํ ์ ์๊ณ ,- ๋ ๋๋ง ์ค์ ํ์์ ๋ ์ด์์(page UI)๊ฐ ์กด์ฌํ ๊ฒฝ์ฐ, ํ์ ์์๋ฅผ ๋ฐ์์ค๊ธฐ ์ํ children props๋ฅผ ์์ฑํด์ผ ํฉ๋๋ค. ใด ์ด๋ฅผ ํ๊ธฐ ์ํด์๋, { children }: { children: ReactNode } ๊ตฌ๋ฌธ์ ์ฌ์ฉํด์ ์ด๋ค์ง ์ ์์ต๋๋ค. { children }: { children: ReactNode } ์ด ๊ตฌ๋ฌธ์ TypeScript์ ๊ฐ์ฒด ๊ตฌ์กฐ ๋ถํด์ ํ์ ์ ์๋ฅผ ๊ฒฐํฉํ ๊ฒ์ ๋๋ค.(๋ฐ๋ผ์, ๊ฐ์ฒด์ ํน์ .. 2024. 6. 18. [NEXT.js 14] 4. Font ๋ฐ๊พธ๊ธฐ NEXT.js ์์๋ 'next/font/google'์ ๊ฐ์ด google font ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ด์ฅํ๊ณ ์์ด ์ ๊ทผ์ฑ์ด ์ข์ต๋๋ค.๋ฟ๋ง ์๋๋ผ 'next/font'๋ ๋ชจ๋ ๊ธ๊ผด ํ์ผ์ ์๋์ ์ผ๋ก ์์ฒด ํธ์คํ ์ด ๋ด์ฅ๋ผ ์๊ณ ,์ด๋ฅผ ์ ์ฉํ๊ณ ์ ๋ ์ด์์(๋ทฐ)์ ์ฌํํธ(๊น๋นก์, ๊ธ๊ผด์ ์๊ฐ์ ๋ณํ ๋ฑ) ์์ด ํฐํธ๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค. Font ๋ฐ๊พธ๊ธฐ 1. import {...} from 'next/font/google'; 2. layout.tsx ๋๋ Font.ts ์ปดํฌ๋ํธ์ ์ฌ์ฉํ Font ์์ฑ 3. tailwind.config.ts ์์ฑ 4. tailwind css ํ๊ธฐ๋ก ์ฌ์ฉํ๊ธฐ์์ธ 1. import {...} from 'next/font/google'; # app/font.tsimpor.. 2024. 6. 17. [NEXT.js 14] 3. CSS ์ฌ์ฉ 2๊ฐ์ง ๋ฐฉ๋ฒ (css module ์์ / global.css : tailwind css) CSS ์ฌ์ฉ ๋ฐฉ๋ฒ 1. ์ฒซ๋ฒ์งธ ๋ฐฉ๋ฒ : css module ์ฌ์ฉ 2. ๋๋ฒ์งธ ๋ฐฉ๋ฒ : global.css ์ฌ์ฉ 3. ํ์ผ์ ์์น 4. suspense & streamed Response๋ฅผ ์ด์ฉํ ์ธ๋ถํ ๋ก๋ฉ์ํ ๊ด๋ฆฌ์์ธ 1. ์ฒซ๋ฒ์งธ ๋ฐฉ๋ฒ : css module ์ฌ์ฉ: ์ผ๋ฐ์ ์ธ ํ์ค css ์ด์ง๋ง, css ํ์ผ์ ํน์ ํ ์ด๋ฆ์ ์ง์ ํจ์ผ๋ก ํน์ ์ปดํฌ๋ํธ๋ก ์ค์ฝํ.=> module.css๋ฅผ import ํ๋ฉด ๊ทธ ํ์ผ๋ค๋ก๋ถํฐ ๊ฐ์ฒด๋ฅผ ๋ถ๋ฌ์ฌ ์ ์๋ค import classes from './main-header.module.css';main-header.js (์ปดํฌ๋ํธ)์ ์ ์ฉํ css ํ์ผ์ ๊ฒฝ๋ก depth๊ฐ ๋์ผํ ์ ์๊ฒ ์์ฑํด์ฃผ๊ณ , import ํด์ค๋ค. 'classes' ๋ผ๊ณ ๋ช ๋ช ํ ๊ฐ์ฒด๋ฅผ.. 2024. 6. 14. [NEXT.js 14] 2. loading.js & Suspense & streamed Response (์ธ๋ถํ ๋ก๋ฉ์ํ ๊ด๋ฆฌ) loding.js (์ง์ฐ) 1. ์ ์ 2. ์ฐธ๊ณ ์์ 3. ํ์ผ์ ์์น 4. suspense & streamed Response๋ฅผ ์ด์ฉํ ์ธ๋ถํ ๋ก๋ฉ์ํ ๊ด๋ฆฌ์์ธ 1. ์ ์: loading.js ํ์ผ์ Suspense ๊ธฐ๋ฐ์ ์ฆ๊ฐ์ ์ธ ๋ก๋ฉ ์ํ๋ฅผ ์์ฑํ ์ ์์.- ๊ธฐ๋ณธ์ ์ผ๋ก Server side ์ด์ง๋ง 'use client'; ๋ฅผ ์ฃผ๋ฉฐ client side ๋ก ์ฌ์ฉ๋ ์ ์๋ค. => Data๋ฅผ ํธ์ถํ๋ ํ์ด์ง์์ ํ์ด์ง์ ์๋ก๊ณ ์นจ์ ํ ๋ ์ง์ฐ(loading.js)์๊ฐ์ ๋๊ฒ ๋๋ฉด, ํ์ด์ง๊ฐ ๊น๋นก์ด๋ฉฐ ๋ํ๋๊ฒ ๋๋ค.=> ๊ทธ๋ฌ๋, ์๋ก ๋ค๋ฅธ ํ์ด์ง๊ฐ์ ์ด๋์์๋ ๊น๋นก์์์ด ํ์ด์ง๊ฐ ์ ํ์ด ์ด๋ค์ง๋ค.>> โ ๊ทธ ์ด์ ๋, NEXT๋ ์์ฃผ ๊ฐ๋ ฅํ ์บ์ฑ์ ํ๋๋ฐ, ํ์ด์ง์ ์ฒซ ์ ์ ๋์ ํ๋ฉด๊ตฌ์ฑ.. 2024. 6. 14. [NEXT.js 14] 1. Image ํ๊ทธ ๊ด๋ จ <Image> ํ๊ทธ 1. ์ ์ 2. ์ฐธ๊ณ ์์ 3. ์์ฑ๊ฐ (lazy & srcset ..) 4. priority ์ค์ (๋ช ์์ )์์ธ 1. ์ ์: ๋ ์ต์ ํ๋ ๋ฐฉ๋ฒ์ผ๋ก ์ด๋ฏธ์ง๋ฅผ ์ถ๋ ฅํ๊ฒ ๋์์ค: ํ์ด์ง์์ ์ค์ ๋ก ๋ณด์ด๋ ๊ฒฝ์ฐ์๋ง ์ด๋ฏธ์ง๊ฐ ํ์๋๋๋ก ์ด๋ฏธ์ง๋ฅผ ์ง์ฐ ๋ก๋ฉํ์ฌ ๊ตฌํํด์ค (์ถ๊ฐ์ ์ธ ๊ตฌ์ฑ์ค์ ์์ด๋!): ์ด๋ฏธ์ง๋ฅผ ์ค์ ํ๋ ํ๋ก์ธ์ค ๋ฑ์ ๋จ์ํ์ํด 2. ์ฐธ๊ณ ์์ => ํ๊ทธ์์์ {logoImg.src} ์์ฑ๊ฐ์ด ์๋ ์ ์ฒด ๊ฐ์ฒด logoImg๋ฅผ ์ฌ์ฉ=> nextJS์ ์ํด ์์ฑ๋ ๊ฐ์ฒด๋ ์ ์ฉํ ์ ๋ณด๋ฅผ ํฌํจํ๊ฒ ๋์ด ์ต์ ํ๋ ๋ฐฉ๋ฒ์ผ๋ก image ์ปดํฌ๋ํธ๋ฅผ ๋์ธ ์ ์๋๋ก ํจ (= import logoImg ~~ ๊ฐ์ฒด๊ฐ ์๋์ผ๋ก ์ด๋ฏธ์ง ์ฌ์ด์ฆ๋ฅผ ๊ฐ์งํด์ฃผ๋๋ฐ, ๊ฐ์ฅ ๊ฐ๋จํ ํ์์ผ๋ก๋ ์ด๋ฅผ ๊ตฌํํ๊ธฐ์ ์ถฉ.. 2024. 6. 11. [Next.js 13] ์ปดํฌ๋ํธ ์์ฑ ํ, page์์ ์ปดํฌ๋ํธ์ <HTML> ํ๊ทธ, ์์ฑ๊ฐ ์ฌ์ฉ๋ฒ ์ ๊ทผ (์์ฝ) ํ์ฌ ๊ฐ๋ฐ์ค์ธ ํ๋ก์ ํธ์์ Next.js 13๋ฒ์ ๊ณผ TypeScript ๋ฅผ ๊ธฐ์ ์คํ์ผ๋ก ๊ฐ๊ณ , ๊ตฌ์ฑ์์๋ง๋ค ์ต๋ํ ์๊ฒ ์ปดํฌ๋ํธํ๋ฅผ ๋ชฉํ๋ก ํ๊ณ ์์ต๋๋ค. (1) ์ปดํฌ๋ํธ(components)๋ฅผ ๋นผ์ฃผ๊ณ , ์ค์ ํ๋ฉด์ ๋ณด์ฌ์ฃผ๋ (2) page.tsx ํ์ผ์์ (1) ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๋ฉด์๋ (3) ํด๋น ์ปดํฌ๋ํธ ๋ด์ ํ๊ทธ๋ ์์ฑ๊ฐ์ ์ฃผ๋ ๋ฐฉ๋ฒ์ ํ์ตํด๋ณด๊ฒ ์ต๋๋ค. 1. (์ํฉ) ์ปดํฌ๋ํธํ & page.tsx ์์ฑ (1.1). ์ปดํฌ๋ํธํ + ์ปดํฌ๋ํธ ์ฌ์ฉ์ ์ํ ๋ฑ๋ก (1.2). Page.tsx ์์ฑ + ์ปดํฌ๋ํธ ๊ฐ์ ธ์ค๊ธฐ 2. ์ปดํฌ๋ํธ์ ์์ฑ ๊ฐ ์ ๋ฌํ๊ธฐ (2.1). ์ปดํฌ๋ํธ ํ์ผ ์ค๋นํ๊ธฐ (interface, props) (2.2). page.tsx( ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ ) ํ์ผ ์ค๋นํ๊ธฐ 3. ์ปดํฌ.. 2023. 9. 27. [Next.js 13] tailwind css Plugin ์์ฑ & ์ ์ฉ ์ ๊ทผ (์์ฝ) ํ์ฌ ๊ฐ๋ฐ์ค์ธ ํ๋ก์ ํธ์์ Next.js 13๋ฒ์ ๊ณผ TypeScript ๋ฅผ ๊ธฐ์ ์คํ์ผ๋ก ๊ฐ๊ณ , ์ด์ ๋๋ถ์ด Tailwind CSS๋ฅผ ์ฌ์ฉํ๊ณ ์์ต๋๋ค. ํ์ํ ์ปดํฌ๋ํธ๋ฅผ Tailwind CSS์์ ๊ฐ์ ธ๋ค๊ฐ ์ฌ์ฉํ๋ ค๋ ์ฐฐ๋, ํ๋ก์ ํธ ๋ด๋ถ tailwind.config.ts ํ์ผ์ Plugin ๋ถ๋ถ์ ์ถ๊ฐํ๋ ์๋ด๋ฅผ ๋ฐ๋ผ๊ฐ๋ด ๋๋ค. 1. (์ํฉ) Tailwind css ์ปดํฌ๋ํธ ์ฌ์ฉ ํ์ (1.1) ์ปดํฌ๋ํธ ์ฝ๋ ๋ด๋ถ 2. Tailwind CSS Plugin ์ถ๊ฐ & ์ค์น (2.1). npm install @ํ๋ฌ๊ทธ์ธ๋ช (2.2). tailwind.config.ts ํ์ผ์ ํ๋ฌ๊ทธ์ธ ์ถ๊ฐ ๋ฐฉ๋ฒ 1. (์ํฉ) Tailwind css ์ปดํฌ๋ํธ ์ฌ์ฉ ํ์ (1.1) ์ปดํฌ๋ํธ ์ฝ๋ ๋ด๋ถ /* This ex.. 2023. 9. 27. [Nextjs] ์ด๊ธฐ ์ค์น & ์ธํ (Installation) ์ ๊ทผ (์์ฝ) 1. Automatic Installation_NextJS app ๋ง๋ค๊ธฐ (1.1) create-next-app ๋ช ๋ น์ด ์ฌ์ฉ 2. Manual Installation_ํ์ ํจํค์ง ์ค์น (2.1). npm install (next@latest / react@latest / react-dom@latest) (2.2). package.json ํ์ผ ์ด๊ณ scripts ์ถ๊ฐํ๊ธฐ (2.3). scripts ์์ธ๋ด์ฉ ์ ๋ฆฌ 3. ํ๋ก์ ํธ ๋ด, app ํด๋ ์์ฑํ๊ธฐ (3.1). app/layout.tsx ๋ด์ ์ฝ๋ ์ถ๊ฐ (3.2). app/page.tsx ๋ด์ ์ฝ๋ ์ถ๊ฐ 4. (optional) ํ๋ก์ ํธ ๋ด, public ํด๋ ์์ฑํ๊ธฐ (4.1). app/layout.tsx ๋ด์ ์ฝ๋ ์ถ๊ฐ (4.2). .. 2023. 6. 1. ์ด์ 1 2 ๋ค์