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を渡すところの解説をしていきます。
フロントエンド開発でお困りのことはありませんか?
フロントエンドの開発支援を行っています。
・Reactの開発をお願いしたい
・コーディング作業を依頼したい
・javascriptライブラリを作って欲しい。
上記以外にも何かありましたらお気軽にお問い合わせください。