Next.js × Express で日記アプリ制作 part1改正版

ひとし

2020年4月15日 01:23

今回作成するアプリはトップページと日記投稿ページの2ページから構成しているシンプルな日記アプリになります。

Next.jsのカスタムサーバーとしてNode.jsのwebフレームワークであるExpressを使いアプリを作っていき、データの保存場所としてクラウドサービスのmongoDB atlasを使っていきます。

part1ではシンプルなNext.jsの雛形を作りcssとboostrapをインストールしていきます。

改正版以前はCSSをインストールしていましたがNext.jsはCSSファイルのインポートをサポートしていましたので、CSSをインストールしている箇所を削除しました。参考サイトはこちらです

Next.jsとは

next.jsはjavascript,Reactを用いて静的及びサーバーサイドレンダリングアプレケーションを構築するための軽量なフレームワークです。

Expressとは

Node.jsのMVCフレームワークです。

MongoDBとは

MongoDB は2007年に 10gen 社 (現 MongoDB Inc.) によって開発された、オープンソースのドキュメント指向型NoSQL です。

CSSとは

CSSは、ウェブページのスタイルを指定するための言語です。

Boostrapとは

BootstrapはTwitter社が開発したCSSの「フレームワーク」です。デザインに自信がなくてもイケてるデザインにすることが可能です。

環境構築

Windows,MacやLinuxでも、Node.jsがインストールされていればNext.jsを始めることができます。

初めにシンプルなアプリを作っていきます。以下のコードを実行してください。

mkdir daily-app
cd daily-app
npm init -y
npm install --save react react-dom next
mkdir pages

daily-appディレクトリが作成されていると思います。

daily-appの中にあるpackage.jsonファイルを編集していきます。"scripts"を以下の様に編集します。

//package.json
"scripts": {
 "dev": "next",
 "build": "next build",
 "start": "next start"
}

編集が完了したらwebサーバーを立ち上げブラウザーで確認してみましょう。以下のコードでwebサーバーを立ち上げます。

npm run dev

localhost:3000にアクセスすると以下のページが表示されます。

スクリーンショット 2020-04-15 0.22.56

Hello Next.jsの表示

次にlocalhost:3000にアクセスした時にHello Next.jsが表示される様にしていきます。

daily-appファイルの中にあるpagesファイルの中にindex.jsを作成します。

touch index.js

作成しましたらindex.jsを以下の様に編集していきます。

//index.js
export default function Index() {
 return (
   <div>
     <p>Hello Next.js</p>
   </div>
 );
}

localhost:3000にアクセスすると下記の様にHello Next.jsと表示されていると思います。

スクリーンショット 2020-04-15 0.34.57

Boostrapのインストール

下記のコマンドを実行しBoostrapをインストールしていきます。

npm install --save react-bootstrap bootstrap

BoostrapのCSSファイルをimportしていきます。pagesファイルに_app.jsを作成し編集していきます。_app.jsではページの初期化をコントロールできるのでページ移動間の固定レイアウトの設定が可能になります。

//_app.js
import 'bootstrap/dist/css/bootstrap.min.css';

function MyApp ({ Component, pageProps }) {
 return <Component {...pageProps} />
};

export default MyApp;

次にpagesファイルのindex.jsを編集してboostrapがインストールされていることを確認していきます。下記の様に編集します。

//index.js
import { Button } from 'react-bootstrap';

export default function index(){ 
 return(
   <div>
     <p>Hello Next.js</p>
     <Button>test</Button>
   </div>
 );
}

webサーバーを立ち上げlocalhost:3000にアクセスするといい感じのButtonが追加されていることが確認できます。これでboostrapがインストールされ実行されていることが確認できました。

スクリーンショット 2020-04-15 19.43.09

まとめ

part1ではシンプルなNext.jsの雛形を作りcssとboostrapをインストールしていきました。

これだけでも静的なサイトであれば十分だと思いますが、このシリーズを通して動的なサイトには欠かせないデータベースにデータを保存する方法とデータの受け渡しを学んでいきます。

参考

美味しいご飯に使わせてもらいますmm