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

依存インストール

次にnextをインストールします。nextはreactとreact-domが共にインストールされていることを期待しているのでその２つもインストールします。

yarn add next react react-dom

設定ファイル作成

🎉next@^9からこのファイルは作成しなくても良くなりました。

// 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"と表示されれば大丈夫です。

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