• ..

Sass

    5分で "Hello from NextJS"

    とりあえず NodeJS のプロジェクトを作りたいので、以下でpackage.jsonを作っておきます。

    yarn init -y

    依存インストール

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

    yarn add next react react-dom

    設定ファイル作成

    next.config.jsというファイルを作ります。とはいっても今はただ"Hello from NextJS"と表示させたいだけなので設定内容はただの空オブジェクトです。

    // next.config.js
    module.exports = {};

    ページ作成

    NextJS では/pagesディレクトリに実際のページとなるファイルを作成していきます。/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"と表示されれば大丈夫です。