5分で Hello from NextJS
NodeJS のプロジェクトを作りたいので、package.json
がまだの場合はyarn init -y
でpackage.json
を作っておきます。
依存インストール
次にnext
をインストールします。next
はreact
とreact-dom
が共にインストールされていることを期待しているのでその2つもインストールします。
yarn add next react react-dom
設定ファイル作成
🎉next@^9
からこのファイルは作成しなくても良くなりました。2019年10月以前の内容
next.config.js
というファイルを作ります。とはいっても今はただ"Hello from NextJS"
と表示させたいだけなので設定内容はただの空オブジェクトです。~~// next.config.js
module.exports = {};
ページ作成
NextJS ではsrc/pages
ディレクトリに実際のページとなるファイルを作成していきます。src/pages/index.jsx
がindex.html
というような意味になるのでこのファイルを作成しましょう。
// /pages/index.jsx
export default () => <h1>Hello from NextJS</h1>
ES で書かれていますが、 NextJS は逆に ES でしか書くことができないのでこれで大丈夫です。
ページ確認
./node_modules/.bin/next dev -p 3333
と実行しましょう。サーバーが立ち上がり、localhost:3333
へアクセスして"Hello from NextJS"
と表示されれば大丈夫です。
この結果のリポジトリです。