TypeScriptだけでWebサイト開発

Next.js, TypeScript, GraphQL, React などで開発を実践するメモ

Next.jsでシンプルなWebページを作成する（localhost）#2

Next.js

開発環境はこちら typescript.hateblo.jp

Next.jsのプロジェクト作成

nextjs.org

yarn create next-app --typescript
(省略)
✔ What is your project named? … my-app

プロジェクトの名前は my-app にしました 直下にmy-appフォルダが作成され、その中にTypeScript環境のNext.js Webアプリの雛形が作成されます

自動で生成されたサイトを確認

cd my-app
yarn dev

http://localhost:3000 をブラウザで確認 「Welcome to Next.js!」というページが表示されます

自分のページに編集する

my-appディレクトリ（プロジェクトフォルダ）内

cd pages

index.ts を以下のようにして変更してみます

import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'

const Home: NextPage = () => {
  return (
    <div className={styles.container}>
      <Head>
        <title>MY APP</title>
        <meta name="description" content="My App" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          MY APP へようこそ！
        </h1>
      </main>

      <footer className={styles.footer}>
          Powered by MY APP
      </footer>
    </div>
  )
}

export default Home

http://localhost:3000 をブラウザで確認 「MY APP へようこそ！」というページが表示されます

buildしてみる

my-app/フォルダに戻り

cd ../
yarn build
（省略）

ちなみに上記（省略）の箇所で表示されるファイル名に○がついてるものはNext.jsによりSSG（Server Side Generated）で自動的に静的HTMLとして保存されます（アクセス時速い）

buildしたものを表示してみる

yarn start

http://localhost:3000 をブラウザで確認 「MY APP へようこそ！」というページが表示されます HTMLソースを見るとcreate-react-app のときと違い生成済みのHTMLであることが確認できます