Next.js란?
Next.js란 웹 어플리케이션을 구축하기 위한 프레임워크입니다. Next.js를 사용하면 사용자 인터페이스를 구축할 수 있습니다. 또한 어플리케이션을 위한 추가 구조, 기능 및 최적화를 제공합니다.
또한 Next.js는 내부적으로 번들링, 컴파일 등과 같은 툴을 추상화하고 자동으로 구성합니다. 따라서 툴을 설정하는 시간을 소비하는 대신 애플리케이션을 빌드하는 데 집중할 수 있습니다.
주요 기능
- Routing
레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 서버 컴포넌트 위에 구축된 파일 시스템 기반 라우터입니다.
- Rendering
클라이언트 및 서버 컴포넌트를 사용한 CSR 및 SSR의 정적 랜더링과 동적 랜더링이 Next.js를 통해 더욱 최적화됩니다.
- Data Fetching
React 컴포넌트에서 async/ await지원을 통한 간소화된 데이터 불러오기 및 React 및 웹 플랫폼에 부합하는 fetch API를 지원합니다.
- Styling
CSS 모듈, 테일윈드 CSS, CSS-in-JS 등 선호하는 스타일링 방식을 지원합니다.
- Optimizations
이미지, 글꼴 및 스크립트 최적화를 통해 애플리케이션의 핵심 웹 바이탈 및 사용자 경험을 제공합니다.
- Typescript
타입 검사 및 컴파일 효율이 개선되고 사용자 지정 타입스크립트 플러그인 및 타입 검사기를 통해 타입스크립트에 대한 지원이 향상되었습니다.
- API Reference
Next.js 전반에 걸친 API 디자인 업데이트.
설치
자동 설치
모든 것을 자동으로 설정해주는 create-next-app을 사용하는 것이 좋습니다.
npx create-next-app@latest설치 시, 아래와 같은 메세지가 표시됩니다.
What is your project named? my-app
Would you like to use TypeScript with this project? No / Yes
Would you like to use ESLint with this project? No / Yes
Would you like to use Tailwind CSS with this project? No / Yes
Would you like to use `src/` directory with this project? No / Yes
Use App Router (recommended)? No / Yes
Would you like to customize the default import alias? No / YesNext.js 기본적으로 Typescript, ESlint 및 Tailwind CSS 구성과 함께 제공됩니다.
애플리케이션 코드에 src 디렉터리를 사용하도록 선택할 수 있습니다.
메시시가 표시되면 create-next-app이 프로젝트 이름으로 폴더를 생성하고 필요한 종속 요소들을 설치합니다.
수동 설치
수동으로 설치하기 위해 필요한 패키지들을 설치합니다.
npm install next@latest react@latest react-dom@latestpackage.json을 열고 다음 스크립트를 추가합니다.
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}이 스크립트는 애플리케이션 개발의 여러 단계를 참조합니다.
dev : 다음 dev를 실행하여 개발 모드에서 Next.js를 시작합니다.
build : 다음 빌드를 실행하여 프로덕션용으로 애플케이션을 빌드합니다.
start : 다음 시작을 실행하여 Next.js 프로덕션 서버를 실행합니다.
lint : 다음 lint 실행하여 Next.js 기본 제공 ESLint 구성을 설정합니다.
다음으로 app 폴더를 만들고 ayout.tsx 및 page.tsx 파일을 추가합니다. 이 파일들은 사용자가 애플리케이션의 루트를 방문할 때 랜더링됩니다.
app/layout.tsx에 아래와 같이 RootLayout를 생성합니다.
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}마지막으로 app/page.tsx에 홈페이지를 생성합니다.
export default function Page() {
return <h1>Hello, Next.js!</h1>
}public 폴더를 만들어 이미지, 글꼴 등 같은 정적 리소스들을 저장할 수 있습니다. public 폴더 내의 파일은 기본 URL/로 접근할 수 있습니다.
개발자 서버 실행
npm run dev를 입력해 개발자 서버를 실행합니다.
http://localhost:3000 로 애플리케이션을 볼 수 있습니다.
