리액트 + NextJS : 설치

#nextjs #react

리액트 + NextJS 기초 입니다.
NextJS는 Vercel이 개발한 오픈 소스 리액트 프레임워크 입니다.
특히 기존의 파일 기반 라우팅에서 폴더 기반 라우팅 + 추가 기능이 합쳐져 가능한 앱 라우팅 기능을 제공 합니다.
또한 SSR 위주의 프레임워크로써 SEO최적화나 클라이언트 속도 향상에 크게 도움이 됩니다.

설치

npm install next@latest react@latest react-dom@latest
package.json

npm 실행 명령어들을 변경해 줍니다.

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

기본 폴더 구조

app/layout.tsx
export default function RootLayout({children}: {children: React.ReactNode}) {
    return (
        <html lang="en">
        <body>{children}</body>
        </html>
    )
}

app에 위치한 layout 파일은 전체 html파일을 감싸고 있는 레이아웃이라 생각하면 됩니다.
body안에 선언된 children은 page요소를 의미합니다.

app/page.tsx
export default function Page() {
    return <h1>Hello, Next.js!</h1>
}

기본 페이지입니다.

위 파일 두개를 html로 나타내면 아래와 같습니다.
레이아웃안에 페이지가 위치하고 있습니다.

<html lang="en">
    <body>
        <h1>Hello, Next.js!</h1>
    </body>
</html>

앱 라우팅의 파일 규칙

layout.tsx, page.tsx 파일처럼 기본 규칙을 가지고 있는 파일들이 있습니다.

layout.tsx : 현재 라우팅의 레이아웃
loading.tsx : 현재 라우팅의 컴포넌트가 로딩중일 때
page.tsx : 현재 라우팅의 페이지 내용
not-found.tsx : 404 페이지
error.tsx : 에러 페이지
global-error.tsx : 전역 에러 페이지
route.tsx : API endpoint
template.tsx : 재렌더링 레이아웃
default.tsx : 병렬 라우팅 기본 페이지