Next.jsでTypeScriptを使う最小限の手順

code:sh

$ mkdir -p next.js-playground && cd next.js-playground

$ yarn init

yarn init v1.22.4

question name (go-next.js-playground):

question version (1.0.0):

question description:

question entry point (index.js):

question repository url (ssh://git@github.com/teitei-tk/go-next.js-playground.git):

question author (teitei-tk <teitei.tk@gmail.com>):

question license (MIT):

question private: true

success Saved package.json

✨ Done in 8.60s.

// 依存packagesのインストール

$ yarn add next react react-dom

$ yarn add -D typescript @types/react @types/node

$ vim package.json

// add to

"scripts": {

"dev": "next",

"build": "next build",

"start": "next start"

}

// pagesでも良い。

$ mkidr -p src/pages

// 予めtsconfig.jsonを作らないとdefault設定を書き込まれない

$ touch tsconfig.json

$ yarn dev

yarn run v1.22.4

$ next

We detected TypeScript in your project and created a tsconfig.json file for you.

Your tsconfig.json has been populated with default values.

event - compiled successfully

wait - compiling...

event - compiled successfully

code:sh

$ vim src/pages/index.tsx

code:index.tsx

import { NextPage } from "next";

const IndexPage = () => {

return (

<>

<p>hello</p>

</>

);

};

export default IndexPage;

https://gyazo.com/fdd61bb743b697f1bf99ab2eb81d98fa