Framework/Next.js

0. React -> Next.js

oniri1 2024. 9. 20. 15:13

Next.js는 React를 서버 사이드 렌더링(SSR)하기 위한 프레임 워크이며 React의 확장판이라고 보면 된다.

npx create-next-app@latest my-next-app

1. 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 컴포넌트를 사용하면 자동으로 이미지 최적화를 수행하여 성능을 향상시킨다.

경로 기반 라우팅: 파일 시스템 기반 라우팅으로, 파일을 페이지 폴더에 추가하면 자동으로 해당 경로가 라우팅된다.