【 next 】next.jsをインストールして表示するまで

最近、nextの勉強したので忘備録つけていきます。

next.jsを起動してみる。

1. プロジェクトディレクトリ(今回はnext-app)を作り、
   下記の内容を記載したpackage.jsonを作成する。

{
    "scripts": {
        "dev": "next",
        "build": "next build",
        "start": "next start",
        "export": "next export",
        "hello": "echo こんにちは"   // ①
    }
}

　
.2 next react react-dom をインストール

~/next-app ❯❯❯ npm install --save next react react-dom

　
.3 pagesディレクトリを作り、その中にindex.jsを作成する。
.4 以下の文をindex.jsに記述

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

　
.5 プロジェクトを実行する

npm run dev

これで、localhost:3000にjsxで記載された文章が表示されます。

解説

package.jsonを先に記述して、next react react-domをインストールしています。
インストールした後はpackage.jsonの記述内容が少し変更されています。

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

    "dependencies": {         //インストール後に書き加えられます
        "next": "^9.3.1",
        "react": "^16.13.1",
        "react-dom": "^16.13.1"
    }   
}

script	nextを操作するコマンドに関する記述
dependencies	依存しているプログラムの情報に関する記述

scriptに記述するとnpm run 左側で実行できるようになります。
例として下のようなhelloコマンドを記述します。

{
    "scripts": {
        "hello": "echo こんにちは"
    },  
}

そしてnpm run helloを行うと次のような形で出力されます。

~/next-app ❯❯❯ npm run hello

> @ hello /Users/koutamakin/development/tamaki/next-app
> echo こんにちは

こんにちは

このように、右側のクォーティングされた部分を実行することができます。

• index.js

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

こちらの記述について、
export default は記述された内容を別のファイルからも
利用できるようにする記述です。
これによって外部からこの関数(jsxで記述された関数)をインポートして
jsxの内容を反映させています。

おしまい