Ubuntu で Next.js プロジェクトをセットアップする方法

Next.js は、高速で最新の Web サイトを作成するのに役立つ React のよく知られたフレームワークです。使いやすく、サーバー側のレンダリング、作成などの強力な機能を備えています。静的ページと API の構築。

Ubuntu ベースのシステムで Next.js プロジェクトを開始したい場合は、このガイドでプロセスを段階的に説明します。

前提条件

Next.js プロジェクトのセットアップを開始する前に、Linux システムに次のようなものをインストールする必要があります。

Node.js: Next.js は Node.js の上に構築されるため、Node.jsインストールされています。
npm: npm (ノードパッケージマネージャー) は、プロジェクトのパッケージと依存関係を管理するために使用されます。

Node.js と npm の両方のインストールプロセスを見てみましょう。

ステップ 1 1: Linux に Node.js と NPM をインストールする

新しいソフトウェアをインストールする前に、パッケージリストを更新して、リポジトリで利用可能なソフトウェアの最新バージョンがインストールされていることを確認することをお勧めします。

sudo apt update

次に、Node.js をインストールします (npm もインストールします)。これは、次のようにマークされているバージョンの Node.js をインストールすることを推奨します。 LTS (長期サポート)。最も安定していて広く使用されているバージョンです。
sudo apt install nodejs
インストールが完了したら、バージョンをチェックして Node.js が正しくインストールされていることを確認します。
node -v npm -v
これで、Node.js と npm の両方がシステムにインストールされました。
ステップ 2: Next.js プロジェクトのインストールとセットアップ
Node.js と npm がインストールされたので、新しい Next.js プロジェクトを作成します。 Next.js をインストールする最も簡単な方法は、Next.js チームが提供する公式パッケージである create-next-app を使用することです。。
sudo npm install -g create-next-app
create-next-app がインストールされたので、新しい Next.js プロジェクトを作成できます。
npx create-next-app@latest my-next-app
ここで、my-next-app はプロジェクトフォルダーの名前です。任意の名前に置き換えることができます。 npx コマンドは create-next-app パッケージをダウンロードして実行し、新しい Next.js プロジェクトをセットアップします。
コマンドの実行が完了すると、Next.js アプリケーションの基本構造を含む my-next-app という新しいフォルダーが作成されます。
ステップ 3: Next.js プロジェクトを実行する
プロジェクトが作成されたら、プロジェクトフォルダーに移動し、開発サーバーを起動します。
cd my-next-app npm run dev
このコマンドはNext.js 開発サーバーを起動します。デフォルトでは、サーバーは http://localhost:3000 で実行されます。

ブラウザを開いてその URL にアクセスすると、デフォルトのNext.js のようこそページが表示されるはずです。
app フォルダーで新しいページの作成を開始できます。たとえば、app ディレクトリ内に新しいファイル about.js を作成して、About ページを作成します。
結論
Ubuntu マシン上に新しい Next.js プロジェクトが正常にセットアップされました。これで、新しいページ、コンポーネント、機能を追加して、Web アプリケーションの構築を開始できます。
Next.js を使用すると、最新の Web アプリケーションを簡単に構築できます。このガイドを活用して、Next.js プロジェクトをインストールして設定する方法を学習しました。