NEXTjs - for 자그마치 개발자 경험 Developer Experience

Next.js by Vercel - The React Framework

index

FOUNDATIONS

• From JavaScript to React
• From React to Next.js
• How Next.js Works

CREATE YOUR FIRST APP

NEXTjs 기본 템플릿 생성, 해당 디렉토리로 이동, 실행

npx create-next-app nextjs-blog --use-npm --example "<https://github.com/vercel/next-learn/tree/master/basics/learn-starter>"

cd nextjs-blog

npm run dev

Assets, Metadata, CSS 등 관리

• Link Component
• Image Component
• Head
• Third-Party JavaScript
• Styling
• 실습결과

Pre-rendering

• 기본 개념
• type1 - Static Generation with and without Data
• type2 - Server-side Rendering - Fetching Data at Request Time
• type3 - Client-side Rendering

Dynamic Routes 동적경로

How to Statically Generate Pages with Dynamic Routes

• 1. Setup
• 2. Page Path Depends on External Data
• 3. Implement 구현 getStaticPaths
• 4. Implement getStaticProps
• 5. Render Markdown
• 6. Polishing the Post Page
• 7. Polishing the Index Page
• 8. Dynamic Routes Details