5分で Hello from NextJS

NodeJS のプロジェクトを作りたいので、package.jsonがまだの場合はyarn init -ypackage.jsonを作っておきます。

依存インストール

次にnextをインストールします。nextreactreact-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.jsxindex.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"と表示されれば大丈夫です。

この結果のリポジトリです。