ページ作成

next.jsではフォルダ構造を使ってページを作ります。

フォルダ構造

./pages
./pages/index.js
./pages/foo.js
./pages/bar.js
./pages/hoge/index.js
./pages/hoge/fuga.js

この構造がそのままURLに反映されます。

Reactコンポーネントで書きます。

./pages/index.jsを作ります。

import React from 'react';

export default () => (
  <div>
    <h1>Hello Next.js</h1>
  </div>
);

最新のNext.jsでは1行目のimport文は不要になりました。

開発版のサーバ起動は次のようにします。

$ npm run dev

その後、 http://localhost:3000/ を開きましょう。

ポート番号を指定する場合は npm run dev -- -p 3333 とします。

サーバを起動したままindex.jsを編集してみましょう。ファイルを保存するとブラウザの表示が即座に反映されます。