[備忘録]Next.jsプロジェクト導入方法

個人の備忘録です。

Next.jsの導入方法

前提条件

Node.jsは導入済みとする。

方法

プロジェクトフォルダにpackage.jsonファイルを作成する。
内容は以下の通り

"package.json"

{
   "scripts": {
      "dev": "next",
      "build": "next build",
      "start": "next start",
      "export": "next export"
  }
}

フォルダ内で以下のコマンドを実行する。

npm install --save next react react-dom

ページ作成

プロジェクトフォルダにpagesフォルダを作成する.
このフォルダがWebページを配置しておくための場所になる。

このフォルダ内にindex.jsファイルを作成する。
内容は下記の通り

index.js

export default () =>
  <div>
    <h1>Next.js</h1>
    <p>新しいプロジェクトです！</p>
  </div>

プロジェクトの実行

プロジェクトフォルダ内で下記のコマンドを実行

npm run dev

ブラウザで確認する。

以上