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 から読み込んだ値をリストで描画します。

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay