プロジェクト作成
https://mo-gu-mo-gu.com/create-next-app-typescript/
モグモグさんの記事を参考にする
前提条件はバックエンドのアプリより断然楽なので省略。
npx create-next-app person-web --typescript
person-api に合わせて person-web の名前で作成
TS を使うのは自明。
CLI で構成の詳細を聞かれる。
- src ディレクトリの使用 -> YES
- app ディレクトリの使用 -> NO
app は古いイメージなので使わない
Success! Created person-web at /Users/kaede0902/source/person-web
これで Next App が作成される
中身は意外とシンプルに出来上がる。
基本的に src/pages しかない。
プロジェクト起動
npm run dev
> person-web@0.1.0 dev
> next dev
warn - Port 3000 is in use, trying 3001 instead.
ready - started server on 0.0.0.0:3001, url: http://localhost:3001
使っているポートは切り替えてくれる。
とても格好いい LP が立ち上がる。
src/pages/index.tsx を変更する
import Head from 'next/head'
import styles from '@/styles/Home.module.css'
export default function Home() {
return (
<>
<Head>
<title>Person Web</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1>test</h1>
</main>
</>
)
}
最低限のレベルからスタートする。
ここに API から読み込んだ値をリストで描画します。
Top comments (0)