Next.js는 React를 서버 사이드 렌더링(SSR)하기 위한 프레임 워크이며 React의 확장판이라고 보면 된다.
npx create-next-app@latest my-next-app1. import alias?
next 생성시 사용자에게 물어보는 alias 설정이다.
import 시 우리는 ../ ./ 이렇게 경로를 지정하는데, 기본적인 root 를 설정할 수 있다.
따로 이름을 지정해줄 수 있는 것 같지만, 무슨 오류가 날지 모르니 default 값을 사용한다.
기본 값 = @/* (그냥 엔터치면 자동 설정된다.)
예시로 ../../some/comp/page.ts 같이 ../를 붙여 뒤로가서 사용하던걸
@/some/comp/page.ts 처럼 사용할 수 있다는 뜻
2. 기본 구성을 알아보자
public
- 기존 React와 같다.
- public 에 위치한 파일을 지정하기 위해선 / 로 사용할 수 있다.
src/app
- next.js를 생성할 당시 src를 root로 지정했다면 src안에 app이 존재한다.
- 기본적으로 next는 라우팅을 자동으로 해주는데, app 폴더를 기준으로 한다. 즉 이제는 react-router-dom을 사용할 필요가 없다.
- app/main/page.tsx를 만들면 /main으로 들어갈시 자동으로 page.tsx가 맵핑(화면에 출력)된다.
- 기본 default 값은 page이므로 보여지길 원하는 tsx 파일의 이름을 page.tsx로 설정하자. 그 외의 다른 부가적인 Component는 어디에 두든 크게 상관이 없다.
- export default 값이 맵핑되기 때문에 원하는 comps를 default 값으로 설정하자.
layout.tsx 를 분석해보자
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] }); //구글 폰트 사용
export const metadata: Metadata = { //여기서 메타데이터를 설정할 수 있다.
title: "AI interviewer site", //탭에 표시되는 이름
description: "oniri1 pers project", //검색에 노출할 키워드를 설정
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}첫 생성시 나오는 것들은 프레임워크의 기초 설명서기 때문에, 코드를 분석해보는게 굉장히 중요하다.
RootLayout의 return이 HTML이고 body안에 children인걸 보니, root의 page.tsx에서 export되는 것이 children임을 짐작할 수 있다.
Next.js의 주요 기능
서버 사이드 렌더링(SSR): 서버에서 페이지를 렌더링하고 HTML을 클라이언트에 보냄으로써 초기 로딩 속도를 향상시키고 SEO 개선한다. (layout.tsx)
정적 사이트 생성(SSG): 빌드 타임에 페이지를 미리 생성하여 CDN(Content Delivery Network)에 배포하여 빠른 로딩을 제공한다.
클라이언트 사이드 렌더링(CSR): 페이지를 클라이언트에서 렌더링하며 기존 React 와 동일하게 동작한다.
자동 코드 분할: 필요한 페이지의 코드만 로드하여 앱의 성능을 최적화
API Routes: 서버리스 함수처럼 사용할 수 있는 API 엔드포인트를 쉽게 만들 수 있다.
CSS 및 Sass 지원: 전역 및 모듈 CSS/Sass를 기본적으로 지원하여 스타일링을 간편하게 할 수 있다.
이미지 최적화: Next.js의 Image 컴포넌트를 사용하면 자동으로 이미지 최적화를 수행하여 성능을 향상시킨다.
경로 기반 라우팅: 파일 시스템 기반 라우팅으로, 파일을 페이지 폴더에 추가하면 자동으로 해당 경로가 라우팅된다.
'Framework > Next.js' 카테고리의 다른 글
| 5. Next.js, react-query를 사용해보기 (0) | 2024.09.20 |
|---|---|
| 4. Next.js, Link와 router (0) | 2024.09.20 |
| 3. Next.js, 기본제공 Image Component (0) | 2024.09.20 |
| 2. Next.js, API Routes 서버리스 함수 (0) | 2024.09.20 |
| 1. Next.js, SSR과 CSR (0) | 2024.09.20 |