Typescript 설정
src/app/layout.jsx 파일 이름을 .tsx로 수정하고 다시
$ npm run dev
하면 package.json에 자동으로 다음 dev. dependencies가 생성된 것을 볼 수 있다.
"devDependencies": {
"@types/node": "20.10.4",
"@types/react": "18.2.45",
"typescript": "5.3.3"
}
추가로 root 폴더에 next-env.d.ts 와 tsconfig.json 이 생성된 것을 볼 수 있다. → 이 두 파일을 수정 필요없음.
layout.tsx는 확장자만 tsx로 바꿨으므로 코드도 typescript로 바꿔줘야한다. 다음 코드로 수정한다.
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를 사용하므로 src/app/page.tsx 파일을 생성. 다음 코드 입력
const Home = () => {
return (
<div>
<h1>Home</h1>
</div>
);
};
export default Home;
이제
$ npm run dev
를 실행하고 localhost:3000로 접속하면
페이지가 뜨는 것을 확인할 수 있다.
참고: App router는 파일 이름이 반드시 page.tsx이어야 함.
'Next.js 개발 가이드 > 01. Set up' 카테고리의 다른 글
| 7. Set up - ESLint, Prettier [보완] (1) | 2024.01.15 |
|---|---|
| 6. Set up - 환경 및 metadata (0) | 2023.12.14 |
| 5. Set up - Tailwind CSS (0) | 2023.12.14 |
| 4. Set up - ESLint, Prettier (0) | 2023.12.14 |
| 2. Set up - create app (0) | 2023.12.14 |
