プログラミング初心者のための入門ブログエンジニアが未来を切り開く。Next.jsプロジェクトを手動で作成する方法この広告は、90日以上更新していないブログに表示しています。Webサイトの生成(SSG)、優れたSEO最適化など、いくつかの追加機能を有効にするオープンソースのReactフレームワークです。Reactアプリケーションを構築するために広く使用されています。Production』と呼んでおり、そのような主張とともに、ReactのWebサイトおよびWebアプリケーションをゼロから本番環境に移行するのに役立つ一連の機能が提供されております。Next.jsは静的サイト向けに設計されており、その目的のために十分に設計されています。本日は、手動セットアップのNext.jsアプリ作成を初心者様に解説致します。前提条件このチュートリアルを開始する前に、下記のものが必要となります。Next.jsをインストールするには、Node.jsのバージョンが10.13以降が必要となります。Node.jsをインストールできます。MacOS、Windows(WSL含む)、LinuxNext.jsアプリケーションを作成する最も簡単な方法は、Create-Next-App(CNA)を使用することです。CNAを使用した、基本的なNext.jsアプリケーション作成は以前に解説しましたので、下記を参照して下さい。dev-k.hatenablog.comCNAを使用したくない理由がある場合、または単にNext.jsアプリをゼロから作成したい場合は、プロジェクトの初期化中に常にCNAを使用する必要はありません。Next.jsプロジェクトを作成する2つ目の方法は、手動で行うことです。Next.jsプロジェクトを手動で作成まず、プロジェクトディレクトリを作成し、npmを使用して必要な依存関係をインストールする必要があります。ターミナルを開き、下記のコマンドを実行して、Next.jsアプリケーションを格納する新しいプロジェクトフォルダを作成します。Nodeプロジェクトを初期化します。-yこのコマンドは、プロジェクトディレクトリのルートにpackage.jsonファイルを作成します。次に、Next、React、react-domのnpmパッケージが必要となります。下記コマンドでそれらすべてを一度にインストールできます。react-domインストールが完了すると、プロジェクトに新しいnode_modulesディレクトリが作成されていることがわかります。このディレクトリには、プロジェクトにインストールされているすべての依存関係が保存されます。中身を確認すると、インストールした3つのnpmパッケージとそれらのすべてのサブ依存関係がそこにあることがわかります。依存関係がインストールされたので、アプリケーションを起動する方法が必要となります。package.jsonファイルを開き、scriptsに下記のように追加します。}devスクリプトは、開発モードの時にアプリケーションを実行するために使用されます。開発プロセスをより快適にする、特別なエラー処理、ホットリロード、およびその他の機能を使用してコードが実行されることを意味しています。開発モードでNext.jsを起動します。本番モードでNext.jsを起動します。本番用のNext.jsアプリをビルドします。devでコマンドを実行するとエラーがスローされます。Next.jsは、あなたのWebサイトのすべての異なるパスを保持する/pagesディレクトリを探します。それが、見つからなかったときにエラーを投げるためです。新しく/pagesディレクトリを作成し、Next.jsがレンダリングできるページを追加する必要があります。_app.jsファイルを作成します。pagesフォルダに存在する、カスタムコンポーネントです。Next.jsでは、このコンポーネントを利用して、ページを初期化します。下記のように記述して下さい。index.jsファイルも新しく追加してください。Next.jsがレンダリングできるように、/pages/index.jsファイルにいくつかのコードを追加する必要があります。任意のテキストエディタで/pages/index.jsを開き、下記コードをファイルに追加してください。)}pagesフォルダには自動的にindex.jsというページがあり、アプリケーションの開始点である/に自動的にルーティングされます。ページ間で異なるindex.jsを持つことができますが、基本的には各フォルダに1つずつです。それでは、設定してきたのがしっかりと動作するのか、アプリを実行します。dev任意のブラウザでhttp://localhost:3000にアクセスしてください。Next.jsドキュメントを参照してください。お疲れ様でした、おめでとうございます。これで、あなたはデフォルトのNext.jsプロジェクトを使用していく準備が整いました。プロジェクトルートに新しく、stylesフォルダ作成しその中でCSSまたはSCSSファイルを管理して下さい。useCustomHook.jsNext.jsのディレクトリについて詳しく理解したい場合、下記で解説しております。dev-k.hatenablog.com最後に超高速で安全なSEOとして重点を置いたアプリケーションを作成したいと仮定した場合、Next.jsは最も最適です。手動で始めるのは、さほど難しい事ではありません。手動セットアップの場合、アプリをカスタマイズして高度な機能を使用していけます。アプリを作成可能であり、依存関係もありません。CNAはNext.jsの作成者によって、公式で維持されており、多くの利点がございます。Next.jsアプリケーションの構築をすばやく開始したい場合は、手動はお勧めしません。どちらも、Next.jsから始めるのは簡単で、心配する必要はありません。開発者向けの多くの例を含む優れたドキュメントがあります。本日は以上となります。最後まで読んで頂きありがとうございます。17:56ご訪問いただきありがとうございます。私はdeve.Kと申します。現役のReact.jsプログラマーでありWebアプリ開発に携わっています。当ブログでは、ITやプログラミングの学習を目的としたブログを運営しています。専門分野はJS/TS/Node.js/React/Next.jsです。質問や相談、または学びたい分野のリクエストなどがありましたら、お気軽にお問い合わせください。このブログでは、ITやプログラミングに関する情報を分かりやすく、かつ実践的な内容でお届けしています。皆様にとって有益な情報を提供し、より良い学習体験を得ていただけるよう、精一杯の努力をしてまいります。今後ともどうぞよろしくお願いいたします。[deve.K].はてなブログをはじめよう!dev04Kさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。