반응형
- 공식문서 링크: https://nextjs.org/learn/dashboard-app
- 공식문서 번역 블로그 링크: https://kidongg.github.io/categories/next-js-learn/
Chapter 1. Getting Started
- `pnpm (패키지 매니저)` 사용 권장
⬇️ pnpm 설치
npm install -g pnpm
⬇️ Next.js 애플리케이션 생성
npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm- create-next-app: CLI 도구
- --example: 스터터 예제 플래그
⬇️ Next.js 프로젝트 패키지 설치
pnpm i
⬇️ Next.js 프로젝트 시작
pnpm dev
폴더 구조
프로젝트에는 다음과 같은 폴더 구조가 포함되어 있습니다.
- /app: 애플리케이션의 모든 경로, 컴포넌트, 로직이 포함된 폴더입니다. 대부분의 작업은 이곳에서 이루어집니다.
- /app/lib: 재사용 가능한 유틸리티 함수와 데이터 페칭 함수와 같은 애플리케이션에서 사용되는 함수들이 포함되어 있습니다.
- /app/ui: 카드, 테이블, 폼과 같은 애플리케이션의 UI 컴포넌트들이 포함되어 있습니다. 이 컴포넌트들은 이미 스타일링되어 있어 시간을 절약할 수 있습니다.
- /public: 이미지와 같은 애플리케이션의 정적 파일이 포함되어 있습니다.
- 구성 파일: `next.config.js`와 같은 구성 파일이 애플리케이션 루트에 있습니다. 이 파일들은 대부분 `create-next-app`을 사용할 때 자동으로 생성되고 구성됩니다. 이 과정에서는 해당 파일들을 수정할 필요가 없습니다.
* Prisma, Drizzle: 데이터베이스 스키마에 따라 타입 자동 생성해주는 도구
Chapter 2. CSS Styling
`app/ui` 폴더 > `global.css`
- 해당 파일에 스타일을 작성하면, 애플리케이션의 모든 경로에 전역적으로 CSS 규칙을 추가할 수 있다.
- 일반적으로 최상위 컴포넌트(루트)에 포함된다.
- `app/layout.tsx` > `global.css` 파일 내부에서 전역 스타일 추가 가능
// /app/layout.tsx
import "@/app/ui/global.css";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
CSS 규칙을 추가하지 않았는데 스타일이 설정된 이유: `global.css` 내부의 `@tailwind` 지시문이 포함되어 있기 때문
/* /app/ui/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
스타일 처리 방법
1. tailwind: 클래스 이름을 추가해 요소의 스타일을 지정 -> 스타일 중복/충돌 방지 및 CSS 번들 크기가 커지는 일 방지 가능
// /app/page.tsx
import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
export default function Page() {
return (
// These are Tailwind classes:
<main className="flex min-h-screen flex-col p-6">
<div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
// ...
)
}
2. CSS Modules: 고유한 클래스 이름을 자동 생성하여 컴포넌트에 CSS 범위를 지정하는 방법
/* /app/ui/home.module.css */
.shape {
height: 0;
width: 0;
border-bottom: 30px solid black;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}// /app/page.tsx
import styles from '@/app/ui/home.module.css';
//...
<div className="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20">
<div className={styles.shape}></div>;
// ...
3. clsx 라이브러리: 조건부 스타일링 지정
// /app/ui/invoices/status.tsx
import clsx from 'clsx';
export default function InvoiceStatus({ status }: { status: string }) {
return (
<span
className={clsx(
'inline-flex items-center rounded-full px-2 py-1 text-sm',
{
'bg-gray-100 text-gray-500': status === 'pending',
'bg-green-500 text-white': status === 'paid',
},
)}
>
// ...
)}
4. 그 외
- Sass: .css와 .scss 파일을 가져와 사용 가능
- CSS-in-JS 라이브러리: styled-jsx, styled-components, emotion 등을 활용.
Chapter 3. Optimizing Fonts and Images
Cumulative Layout Shift (누적 레이아웃 이동, CLS): Google이 웹사이트의 성능과 사용자 경험을 평가하는 데 사용하는 지표 중 하나
- 글꼴 관련 CLS는 브라우저가 처음에는 대체 또는 시스템 글꼴로 텍스트를 렌더링했다가 사용자 정의 글꼴이 로드된 후 이를 교체하면서 발생한다 → 이 과정에서 텍스트 크기, 간격, 레이아웃이 바뀌어 주변 요소가 이동할 수 있다.
Next.js의 글꼴 최적화
- `next/font` 모듈을 사용하면 Next.js는 애플리케이션에서 글꼴을 자동으로 최적화한다.
- 글꼴 파일을 빌드 시 다운로드해 정적 자산과 함께 호스팅한다.
- 사용자가 애플리케이션에 접속할 때 폰트 파일 관련 추가 네트워크 요청이 발생하지 않기 때문에 성능이 향상된다.
이미지 최적화
- Next.js는 이미지와 같은 정적 자산을 최상위 폴더인 /pulic 폴더에서 제공한다.
- `/public` 폴더 아래의 파일은 애플리케이션에서 참조할 수 있다.
- 일반 HTML의 img 태그 사용 시와 달리, `next/image` 컴포넌트를 사용하면 이미지를 자동으로 최적화 할 수 있다.
- 이미지가 다양한 화면 크기에서 반응하는지 확인
- 다양한 디바이스에 맞는 이미지 크기를 지정
- 이미지가 로드될 때 레이아웃이 이동하지 않도록 함
- 사용자 뷰포트 외부에 있는 이미지를 lazy load 함
- `<Image>` 컴포넌트
- <img> 태그의 확장
- 이미지 로드 시 레이아웃이 자동으로 이동하는 것(CLS)을 방지해준다.
- 뷰포트가 작은 기기에 큰 이미지가 전송되지 않도록 이미지 크기를 조정한다.
- 이미지 레이지 로딩(이미지가 뷰포트에 들어갈 때 이미지가 로드됨)을 한다.
- 브라우저에서 WebP 및 AVIF와 같은 최신 형식을 지원하는 경우 이미지를 제공한다.
Chapter 4. Creating Layouts and Pages
Nested routing
- Next.js는 폴더가 중첩 경로를 만드는 데 사용되는 파일 시스템 라우팅을 사용한다.
- 각 폴더는 URL segement에 매핑되는 route segment를 나타낸다.
- `layout.tsx` 및 `page.tsx` 파일을 사용해 각 경로에 대해 별도의 UI를 만들 수 있다.
- `page.tsx`는 React 컴포넌트를 내보내는 특별한 Next.js 파일이며, 경로에 접근하기 위해 필요하다.
- 중첩된 경로를 만들려면 폴더를 서로 중첩하고 그 안에 `page.tsx` 파일을 추가하면 된다.
Creating the dashboard layout
- Next.js에서는 특별한 `layout.tsx` 파일을 사용해 여러 페이지 간에 공유되는 UI를 만들 수 있다.
- `/dashboard` 폴더에 `layout.tsx` 라는 새 파일을 추가하고 코드를 추가하면 된다.
- 이 경우 `/dashboard` 내의 페이지는 다음과 같이 `<Layout/>` 안에 자동으로 중첩된다.
- Next.js에서 레이아웃을 사용하면, 탐색 시 페이지 컴포넌트만 업데이트되고 레이아웃은 다시 렌더링되지 않는다는 이점이 있다. 이를 Partial rendering이라고 한다.
- Root Layout: `/app/layout.tsx` 내부의 코드
Chapter 5. Navigating Between Pages
HTML <a> 태그 사용 시, 페이지 탐색을 하면 전체 페이지가 새로 고쳐진다.
<Link> 컴포넌트
- 애플리케이션의 페이지 간에 링크를 할 수 있다.
- 자바스크립트로 클라이언트 사이드 탐색을 수행할 수 있다.
- <Link/> 컴포넌트를 사용하려면 `next/link`에서 링크 컴포넌트를 가져온 다음 <a> → <Link> 태그로 바꾼다.
- 전체 새로 고침 없이 페이지 탐색이 가능하다.
Automatic code-splitting and prefetching
반응형