Next.js 14の手動インストールの方法

Next.jsの手動インストール

公式ドキュメントのマニュアルインストールを参考に、Next.jsアプリを作成します。

プロジェクト用ディレクトリを作成して、その中でNext.jsやReact等をインストールします。 

npm install next@latest react@latest react-dom@latest

インストール後、package.jsonは以下のようになっています。 

{
  "dependencies": {
    "next": "^14.2.5",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}
ドキュメントを参考に package.json の scripts を以下のように修正します。scripts がなければ追加します。 
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

ドキュメントを参考にappディレクトリを作成して layout.tsx と page.tsx のファイルを作成します。

app/layout.tsx 

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

app/page.tsx 

export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

作成したら以下のコマンドを実行します。するとNext.jsに不足しているファイルを作成したりモジュールがインストールされ、Next.jsが起動します。 

npm run dev

Next.jsの初回起動

マニュアルインストールのNext.jsの初回起動では、モジュールの追加インストールや必要なファイルの作成が自動で行われます。

以下のモジュールがインストールされて package.json に追加されます。 

@types/node
@types/react
typescript

以下の内容の next-env.d.ts ファイルが新規作成されます。 

/// <reference types="next" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.

以下の内容のtsconfig.jsonファイルが作成されます。 

{
  "compilerOptions": {
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "noEmit": true,
    "incremental": true,
    "module": "esnext",
    "esModuleInterop": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "plugins": [
      {
        "name": "next"
      }
    ]
  },
  "include": [
    "next-env.d.ts",
    ".next/types/**/*.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

初回起動メッセージ

マニュアルインストールした場合、初回起動時メッセージは、以下のような通常に無いメッセージも出力されます。 エラーメッセージ等問題が無ければ、ブラウザでhttp://localhost:3000を開きます。 正常にアクセスできればマニュアルインストールは完了です。 

$ npm run dev

> dev
> next dev

  ▲ Next.js 14.2.5
  - Local:        http://localhost:3000

 ✓ Starting...
It looks like you're trying to use TypeScript but do not have the required package(s) installed.
Installing dependencies

If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your pages directory).


Installing devDependencies (npm):
- typescript
- @types/react
- @types/node


added 6 packages, and audited 29 packages in 1s

3 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities


   We detected TypeScript in your project and created a tsconfig.json file for you.
 ✓ Ready in 2.7s