TIL 홈페이지 만들기 6

nyamo 디렉토리 터미널에서 npm init next-app 을 해준다.
그러면 next.js 프로젝트가 생성이 된다.
front 디렉토리에서 next-env.d.ts 파일을 생성한다.
npm install --save-dev typescript @types/react @types/node 을 설치 해 준다.
pages 디렉토리에 _app.js 파일을 삭제하고 _app.tsx 파일을 생성하고 아래와 같이 입력해 준다.

import { AppProps } from 'next/app'

function App({ Component, pageProps }: AppProps) {
	return <Component {...pageProps} />
}

export default App

그리고 npm run dev 로 실행을 하면 자동으로 tsconfig.json 이 생성된다.
pages 디렉토리에 index.js 를 삭제하고 index.tsx 파일을 생성하고 아래와 같이 입력해 준다.

import React, { useState } from "react";
import Head from "next/head";

export default function Home() {
  const [text, setText] = useState<string>("자바스크립트");

  setTimeout(() => {
    setText("타입스크립트")
  }, 1000)

  return (
    <div className="container">
      <div>
        <span>{text} 적용 완료</span>
      </div>
    </div>
  );
}

그리고 다시 서버를 켜주면 정상적으로 화면에 텍스트가 보이는 것을 확인 할 수 있다.