search
X2BEE Home

3. Typescript

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

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

hashtag
Typescript 설정

1

hashtag
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 파일이 생성됩니다. 이 두 파일은 기본으로 생성되는 파일이므로 수정할 필요는 없습니다.

2

hashtag
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 사용 중)

3

hashtag
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;
4

hashtag
개발 서버 실행 및 확인

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

$ npm run dev

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

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

이전2. Create app다음4. ESLint, Prettier

마지막 업데이트