deve.K

エンジニアが未来を切り開く。

Next.jsプロジェクトを手動で作成する方法

Next.jsプロジェクトを手動で作成する方法

Next.jsとは

Next.jsは、サーバー側のレンダリング(SSR)、静的 Webサイトの生成(SSG)、優れたSEO最適化など、いくつかの追加機能を有効にするオープンソースのReactフレームワークです。

Reactアプリケーションを構築するために広く使用されています。

最近、Next.jsは自身を『The React Framework for Production』と呼んでおり、そのような主張とともに、ReactのWebサイトおよびWebアプリケーションをゼロから本番環境に移行するのに役立つ一連の機能が提供されております。

Next.jsは静的サイト向けに設計されており、その目的のために十分に設計されています。

本日は、手動セットアップのNext.jsアプリ作成を初心者様に解説致します。

前提条件

このチュートリアルを開始する前に、下記のものが必要となります。

ローカル開発マシンにNode.jsがインストールされている

※ Next.jsをインストールするには、Node.jsのバージョンが10.13以降が必要となります。

Node.jsの公式ダウンロードページの指示に従って、 Node.jsをインストールできます。

MacOSWindows(WSL含む)、Linux

Next.jsアプリケーションを作成する最も簡単な方法は、Create-Next-App(CNA)を使用することです。

CNAを使用した、基本的なNext.jsアプリケーション作成は以前に解説しましたので、下記を参照して下さい。

dev-k.hatenablog.com

CNAを使用したくない理由がある場合、または単にNext.jsアプリをゼロから作成したい場合は、プロジェクトの初期化中に常にCNAを使用する必要はありません。

Next.jsプロジェクトを作成する2つ目の方法は、手動で行うことです。

Next.jsプロジェクトを手動で作成

まず、プロジェクトディレクトリを作成し、npmを使用して必要な依存関係をインストールする必要があります。

ターミナルを開き、下記のコマンドを実行して、Next.jsアプリケーションを格納する新しいプロジェクトフォルダを作成します。

mkdir my-next-app

↓

cd my-next-app

新しい空のディレクトリを作成しましたら、npm init でNodeプロジェクトを初期化します。

npm init -y

// or

yarn init -y

このコマンドは、プロジェクトディレクトリのルートにpackage.jsonファイルを作成します。

次に、NextReactreact-domのnpmパッケージが必要となります。

下記コマンドでそれらすべてを一度にインストールできます。

npm install next react react-dom

// or

yarn add next react react-dom

インストールが完了すると、プロジェクトに新しいnode_modulesディレクトリが作成されていることがわかります。

このディレクトリには、プロジェクトにインストールされているすべての依存関係が保存されます。

中身を確認すると、インストールした3つのnpmパッケージとそれらのすべてのサブ依存関係がそこにあることがわかります。

依存関係がインストールされたので、アプリケーションを起動する方法が必要となります。

package.jsonファイルを開き、scriptsに下記のように追加します。

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

devスクリプトは、開発モードの時にアプリケーションを実行するために使用されます。

開発プロセスをより快適にする、特別なエラー処理、ホットリロード、およびその他の機能を使用してコードが実行されることを意味しています。

dev: 開発モードでNext.jsを起動します。

start: 本番モードでNext.jsを起動します。

build: 本番用のNext.jsアプリをビルドします。

ですが、今の段階でnpm run devでコマンドを実行するとエラーがスローされます。

Next.jsは、あなたのWebサイトのすべての異なるパスを保持する/pagesディレクトリを探します。

それが、見つからなかったときにエラーを投げるためです。

ですので新しく/pagesディレクトリを作成し、Next.jsがレンダリングできるページを追加する必要があります。

mkdir pages

cd pages

その中に新しいファイルを追加します、 _app.jsファイルを作成します。

アンダースコアを先頭に持つ特別なカスタムページであり、 _app.jsファイルでは pagesフォルダに存在する、カスタムコンポーネントです。

Next.jsでは、このコンポーネントを利用して、ページを初期化します。

下記のように記述して下さい。

function MyApp({ Component, pageProps }) { 
  return <Component {...pageProps} />; 
} 

export default MyApp;

同じ階層で index.jsファイルも新しく追加してください。

Next.jsがレンダリングできるように、/pages/index.jsファイルにいくつかのコードを追加する必要があります。

任意のテキストエディタで/pages/index.jsを開き、下記コードをファイルに追加してください。

import Head from 'next/head' 

export default function Home() { 
return(
  <div> 
    <Head> 
      <title>My new Next.js app</title>
    </Head>
    <main>
      <h1>This is my manually set-up Next.js project</h1>
    </main>
  </div> 
)
}

pagesフォルダには自動的にindex.jsというページがあり、アプリケーションの開始点である/に自動的にルーティングされます。

しかし、ページ間で異なるindex.jsを持つことができますが、基本的には各フォルダに1つずつです。

それでは、設定してきたのがしっかりと動作するのか、アプリを実行します。

npm run dev

任意のブラウザでhttp://localhost:3000にアクセスしてください。

Next.jsのdemo

手動セットアップのNext.jsアプリをカスタマイズして高度な機能を使用する方法については、 こちらの Next.jsドキュメントを参照してください。

お疲れ様でした、おめでとうございます。

これで、あなたはデフォルトのNext.jsプロジェクトを使用していく準備が整いました。

プロジェクトルートに新しく、stylesフォルダ作成しその中でCSSまたはSCSSファイルを管理して下さい。

/📁 styles
 ├ Home.module.css
 ├ global.css
/📁 hooks
 ├ useCustomHook.js

Next.jsのディレクトリについて詳しく理解したい場合、下記で解説しております。

dev-k.hatenablog.com

最後に

超高速で安全なSEOとして重点を置いたアプリケーションを作成したいと仮定した場合、Next.jsは最も最適です。

手動で始めるのは、さほど難しい事ではありません。

手動セットアップの場合、アプリをカスタマイズして高度な機能を使用していけます。

create-next-appでは数秒で新しいNext.js アプリを作成可能であり、依存関係もありません。

CNAはNext.jsの作成者によって、公式で維持されており、多くの利点がございます。

Next.jsアプリケーションの構築をすばやく開始したい場合は、手動はお勧めしません。

ですがどちらも、Next.jsから始めるのは簡単で、心配する必要はありません。

開発者向けの多くの例を含む優れたドキュメントがあります。

本日は以上となります。

最後まで読んで頂きありがとうございます。

プライバシーポリシー