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を渡すところの解説をしていきます。
