DEV Community

kaede
kaede

Posted on

Next 基礎 Part 01 -- プロジェクト作成

プロジェクト作成

https://mo-gu-mo-gu.com/create-next-app-typescript/

モグモグさんの記事を参考にする

前提条件はバックエンドのアプリより断然楽なので省略。

npx create-next-app person-web --typescript
Enter fullscreen mode Exit fullscreen mode

person-api に合わせて person-web の名前で作成
TS を使うのは自明。

CLI で構成の詳細を聞かれる。

  1. src ディレクトリの使用 -> YES
  2. app ディレクトリの使用 -> NO

app は古いイメージなので使わない

Success! Created person-web at /Users/kaede0902/source/person-web
Enter fullscreen mode Exit fullscreen mode

これで Next App が作成される

Image description

中身は意外とシンプルに出来上がる。

基本的に 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
Enter fullscreen mode Exit fullscreen mode

使っているポートは切り替えてくれる。

Image description

とても格好いい 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>
    </>
  )
}
Enter fullscreen mode Exit fullscreen mode

最低限のレベルからスタートする。

Image description

ここに API から読み込んだ値をリストで描画します。

Top comments (0)