【Next.js入門①】Next.jsで'Hello Next.js'までの流れ

こちらの連載記事では、Next.jsの入門チュートリアルを紹介しながら、最終的にポートフォリオファイルの完成を目指します。

筆者もNext.jsビギナーなので、同じくNext.jsに触れるのが初めてだという方を対象に書き進めていきます。

前提

Node jsとnpmをインストールしておきましょう。（Node jsをインストールすれば自動的にnpmもインストールされます。）

Next.jsプロジェクトの準備

以下の手順で、Next.jsプロジェクトをインストールしましょう。

mkdir hello-next
cd hello-next
npm init -y

そうするとディレクトリ直下にpackage.jsonが生成されます。

{
  "name": "2-next-portfolio",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

次に以下のコマンドを入力

npm install --save react react-dom next
mkdir pages

次にpackage.jsonのscriptsへ以下のように追記しましょう。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },

最後にターミナルコマンドで以下を入力しましょう。

npm run dev

localhost:3000へアクセス

ブラウザからlocalhost:3000へアクセスすると404Not foundのページに繋がります。

これでNextのプロジェクトがビルドされました！

表示させるためのページを作成しましょう。

pages/index.js

const Index = () => (
    <div>
      <p>Hello Next.js</p>
    </div>
  );
  
  export default Index;

以下のような画面が表示されます。