> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/pjt-prepare/publish-your-docs/store-front-framewok-next.js/01.-setup/3.-typescript.md).
# 3. Typescript
이 문서는 TypeScript를 사용하여 Next.js 프로젝트를 설정하고 실행하는 방법에 대한 안내입니다.
먼저 프로젝트의 기본적인 설정을 위해 파일 이름과 확장자를 변경하고, 이에 따른 종속성을 자동으로 추가하는 과정을 설명합니다.
***
### Typescript 설정
{% stepper %}
{% step %}
### layout 파일 확장자 변경 및 개발 서버 실행
src/app/layout.jsx 파일의 이름을 .tsx로 변경하고 개발 서버를 실행합니다.
```bash
$ npm run dev
```
파일의 이름을 .tsx로 수정하면 TypeScript 파일로 인식됩니다. TypeScript 파일은 TypeScript와 JSX를 함께 사용할 때 사용됩니다.
개발 서버를 실행하면 package.json에 자동으로 다음 devDependencies가 추가됩니다.
```json
"devDependencies": {
"@types/node": "20.12.5",
"@types/react": "18.2.74",
"typescript": "5.3.3"
}
```
또한 프로젝트 루트에 `next-env.d.ts`와 `tsconfig.json` 파일이 생성됩니다. 이 두 파일은 기본으로 생성되는 파일이므로 수정할 필요는 없습니다.
{% endstep %}
{% step %}
### layout.tsx 코드 변경
확장자만 `.tsx`로 변경했으므로, 타입을 반영한 코드로 수정합니다.
{% code title="src/app/layout.tsx" %}
```tsx
import React from "react";
import type { ReactNode } from "react";
interface LayoutProps {
children: ReactNode;
}
const RootLayout = ({ children }: LayoutProps) => {
return (
header{children}
);
};
export default RootLayout;
```
{% endcode %}
참고: 첫번째 줄 `import React from 'react';`는 생략해도 됩니다. (React 17부터 생략 가능. 현재는 React 18 사용 중)
{% endstep %}
{% step %}
### Main page 생성 (App Router)
App Router를 사용하므로 `src/app/page.tsx` 파일을 생성하고 다음 코드를 입력합니다.
{% code title="src/app/page.tsx" %}
```tsx
const Home = () => {
return (
Home
);
};
export default Home;
```
{% endcode %}
{% endstep %}
{% step %}
### 개발 서버 실행 및 확인
다시 개발 서버를 실행합니다.
```bash
$ npm run dev
```
실행 후 localhost:3000으로 접속하면 페이지가 정상적으로 표시되는 것을 확인할 수 있습니다.
{% endstep %}
{% endstepper %}
참고: App Router에서 페이지 파일명은 반드시 `page.tsx`이어야 합니다.
.png?alt=media&token=d4ef4167-db7f-40e2-bff9-22ee35f5257b)