> 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`이어야 합니다.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://tech.x2bee.com/dev-guide/pjt-prepare/publish-your-docs/store-front-framewok-next.js/01.-setup/3.-typescript.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.