3. Typescript

이 문서는 TypeScript를 사용하여 Next.js 프로젝트를 설정하고 실행하는 방법에 대한 안내입니다.

먼저 프로젝트의 기본적인 설정을 위해 파일 이름과 확장자를 변경하고, 이에 따른 종속성을 자동으로 추가하는 과정을 설명합니다.

Typescript 설정

layout 파일 확장자 변경 및 개발 서버 실행

src/app/layout.jsx 파일의 이름을 .tsx로 변경하고 개발 서버를 실행합니다.

$ npm run dev

파일의 이름을 .tsx로 수정하면 TypeScript 파일로 인식됩니다. TypeScript 파일은 TypeScript와 JSX를 함께 사용할 때 사용됩니다.

개발 서버를 실행하면 package.json에 자동으로 다음 devDependencies가 추가됩니다.

"devDependencies": {
  "@types/node": "20.12.5",
  "@types/react": "18.2.74",
  "typescript": "5.3.3"
}

또한 프로젝트 루트에 next-env.d.ts와 tsconfig.json 파일이 생성됩니다. 이 두 파일은 기본으로 생성되는 파일이므로 수정할 필요는 없습니다.

layout.tsx 코드 변경

확장자만 .tsx로 변경했으므로, 타입을 반영한 코드로 수정합니다.

src/app/layout.tsx

import React from "react";
import type { ReactNode } from "react";

interface LayoutProps {
  children: ReactNode;
}

const RootLayout = ({ children }: LayoutProps) => {
  return (
    <html lang="ko">
      <body>
        <header>header</header>
        <main>{children}</main>
        <footer>footer</footer>
      </body>
    </html>
  );
};

export default RootLayout;

참고: 첫번째 줄 import React from 'react';는 생략해도 됩니다. (React 17부터 생략 가능. 현재는 React 18 사용 중)

Main page 생성 (App Router)

App Router를 사용하므로 src/app/page.tsx 파일을 생성하고 다음 코드를 입력합니다.

src/app/page.tsx

const Home = () => {
  return (
    <div>
      <h1>Home</h1>
    </div>
  );
};
export default Home;

개발 서버 실행 및 확인

다시 개발 서버를 실행합니다.

$ npm run dev

실행 후 localhost:3000으로 접속하면 페이지가 정상적으로 표시되는 것을 확인할 수 있습니다.

참고: App Router에서 페이지 파일명은 반드시 page.tsx이어야 합니다.

이전2. Create app

다음4. ESLint, Prettier

마지막 업데이트 6개월 전