ブログ

NextjsはReactのフレームワークです。

このシリーズでは、Nextjs使ってメモアプリを使って簡単なメモアプリを作ってみます。

ひとまず、基本的なCRUD処理を実装することにします。

クライアントだけで作るのでデータベースは利用しません。

Nextjsのセットアップ

インストール

npm install --save next react react-dom

インストール後は、スクリプトを実行できるようにpackage.jsonに下記を記述

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

セットアップはこれで完了

ページを作成する

• 一覧ページ
• 詳細ページ
• 作成ページ
• 更新ページ

4ページを作成します。

一覧ページを作成

pages/index.jsを作成します。

pages/index.js

const Index = () => {
  return (
    <div>
      <h1>メモ一覧</h1>
    </div>
  )
}
export default Index

pagesの下にファイルを設置すると自動的にルーティングが設定されます。

ファイルを作成後に下記を実行

npm run dev

http://localhost:3000/ここにアクセスすると無事ページが表示されます。

作成ページを作成

次に作成ページを作ります。

メモデータのjsonの構造は下記とします。

{
  title: string
  content: string
}

単純にタイトルと本文にします。

pages/new.js

const New = () => {
  const handleSubmit = (e) => {
    e.preventDefault()
    const target = e.target
    const title = target.title.value
    const content = target.content.value
    console.log(title)
    console.log(content) 
  }

  return(
    <div>
      <h1>メモ作成</h1>
      <div>
      <form onSubmit={handleSubmit}>
        <div>
          <div>
            <labelhtmlFor="">タイトル</label>
          </div>
          <inputtype="text"name="title"placeholder="title"/>
        </div>
        <div>
          <div>
            <labelhtmlFor="">本文</label>
          </div>
          <textareaname="content"placeholder="content"/>
        </div>
        <div>
          <input type="submit"value="submit"/>
        </div>
      </form>
      </div>
    </div>
  )
}

export default New

作成ぺージのインターフェースはこれで完了。

http://localhost:3000/newに接続するとページが表示されます。

ボタンを押すと、titleとcontentを受け取ることができるのであとで接続したReduxに渡します。

今回はここまで。

次回はReduxの設定とメモデータのjsonを渡すところの解説をしていきます。