ソフトウェアライブラリまたはフレームワークを選択するとき、通常、開発者の経験が考慮されます。
私が「開発者の経験」と言うとき、私は開発者が実際にどのように仕事をするかについて言及しています。 開発者は、楽しく使用できるライブラリまたはフレームワークを選択します。
これが、現在最も人気のあるライブラリとフレームワークがある主な理由のXNUMXつです。 開発者として、タスクを支援するために作成された既存のツールがある場合、最初から始める必要はありません。
フレームワークは、開発者がアプリケーションを構築するために作成および使用するソフトウェアの一部であり、NextJSはそのXNUMXつです。
この投稿では、Nextjs、その主な機能、およびそれを使用してアプリケーションを構築する方法について説明します。 すぐに飛び込みましょう。
Next.jsとは何ですか?
Next.js は、静的WebページとReactベースのオンラインアプリケーションをすばやく簡単に構築するためのJavaScriptフレームワークです。 これにより、Windows、Linux、Macなどのさまざまなプラットフォーム向けの優れたWebアプリを設計できます。
reactについての知識がほとんどなく、reactエコシステムについて詳しく知りたい場合は、Next.jsフレームワークに精通している必要があります。
Next.jsには、開始するために必要なすべてのものが付属していますが、NPMとYarn、JavaScriptとTypeScript、CSSとSCSS、静的エクスポート、サーバーレスデプロイメントから選択できます。
特徴
- ルーティングは自動的に行われます– URLはファイルシステム、ページフォルダー内のファイルにマップされるため、何も構成する必要はありません(もちろん、カスタマイズオプションがあります)。
- 単一ファイルのコンポーネント–同じチームによって完全に統合および作成されたstyled-jsxを使用して、コンポーネントにスコープされたスタイルを簡単に追加できます。
- ホットコードの再読み込み– Next.jsは、ディスクに保存された変更を検出すると、ページを再読み込みします。
- 動的コンポーネント–JavaScriptモジュールとReactコンポーネントを動的にロードできます。
- 静的エクスポート– Next.jsを使用すると、nextexportコマンドを使用してアプリから完全に静的なサイトをエクスポートできます。
- 環境との互換性– Next.jsは、JavaScript、Node、およびReactエコシステムとシームレスに統合されます。
- コードを自動的に分割する–ページのレンダリングには必要なライブラリとJavaScriptのみが使用されます。 Next.jsは、アプリのすべてのコードを含む単一のJavaScriptファイルを作成する代わりに、アプリを多くのリソースにインテリジェントに分割します。
next.jsアプリケーションを作成するにはどうすればよいですか?
インストール
node npxコマンドを使用して、Next.jsプロジェクトをインストールおよびビルドできます。
これにより、フォルダーと、Next.jsプロジェクトの実行に必要なすべてのファイル、構成、およびその他のアイテムが生成されます。
生成されたアプリを起動できます。
ページとルーティング
Next.jsでルートを処理するために、ルーティングフレームワークを採用する必要はありません。 Next.jsを使用したルーティングは、簡単に設定できます。 create-next-appコマンドを使用して新しいNext.jsアプリを作成すると、アプリはデフォルトで「pages」というフォルダーを作成します。
この「ページ」フォルダは、ルートを管理する場所です。 その結果、サブディレクトリ内の各反応コンポーネントファイルは個別のルートとして処理されます。
たとえば、フォルダにこれらのファイルが含まれている場合:
- index.js
- about.js
- aricles.js
このファイルは、次のXNUMXつの方法で自動的に変換されます。
- インデックスページlocalhost/index
- アバウトページlocalhost/アバウト
- ブログページlocalhost/articles
about.jsページの例を以下に示します。 ご覧のとおり、このページについては何も提供されていません。 これは単に標準のReact機能コンポーネントです。
ルート
ネストされたルートを作成するには、最初にサブフォルダーを確立する必要があります。 例:ページ/記事。 そのフォルダー内に「contact.js」reactコンポーネントを作成すると、localhost / articles/contactページが生成されます。
XNUMXつのファイルをpages/articles.jsに配置し、別のファイルをpages / articles/index.jsに配置した場合。 どちらも同じパスlocalhost/blogを反映しています。 この状況では、Next.jsはarticle.jsファイルをレンダリングするだけです。 各ブログ投稿に独自のパスがある動的ルートについてはどうでしょうか。
- localhost / blog /first-article
- localhost / blog /-second-article
角かっこ表記を使用して、Next.jsで動的ルートを定義できます。 例:pages / article / [slug] .js
リンクルート
これで、最初のルートが完了しました。 ページをそれらのルートに接続する方法を尋ねていると思います。 そのためには「next/link」が必要です。
[概要]ページへのリンクを含むホームページの例を次に示します。
リンクのスタイルを設定する場合は、次の構文を使用します。
ルートをリダイレクトする
特定のページへのリダイレクトを強制する必要がある場合はどうなりますか? たとえば、ボタンが押されたとき? これは、「router.push」を使用して実行できます。
SEO
Webアプリケーションのページには、HTML本文内のデータに加えてメタ(ヘッド)要素が必要です。 これには、ReactアプリケーションにReactHelmetという名前の追加要件をインストールする必要があります。
NextのHeadコンポーネント/Nextのheadコンポーネントを使用して、検索結果と埋め込みに表示されるWebページにメタデータを簡単に追加できます。
コンポーネント
コンポーネントやレイアウトファイルを頻繁に開発する必要があります。 たとえば、ナビゲーションバーをレンダリングするコンポーネント。 これまで、pagesフォルダーを使用しました。 コンポーネントがルートページを意図していない場合はどうなりますか?
ユーザーがlocalhost/navbarなどのページに移動することは望ましくありません。 Navbar.jsコンポーネントをpagesフォルダーに配置すると、そのようになります。 その状況であなたは何をすべきですか?
「ページではない」すべてのコンポーネントを別のフォルダーに保存するだけです。 ほとんどのNext.jsプロジェクトは、モニカの「コンポーネント」を使用しており、このフォルダーはプロジェクトのルートフォルダーに生成されます。
ヘッドコンポーネント
最初のページの読み込みは、サーバー側のNext.jsによってレンダリングされます。 これは、ページのHTMLを変更することによって行われます。 ヘッダーセクションが含まれています。
Next.js Headコンポーネントは、titleやmetaなどのヘッダーセクションタグを提供するために使用されます。 このレイアウトコンポーネントの例では、Headコンポーネントが使用されています。
404ページを作成できません
独自の404エラーページを作成することは可能です。 メッセージをカスタマイズしたり、独自のページデザインを追加したりすることもできます。 pagesフォルダーに404.jsファイルを作成します。
404エラーが発生すると、Next.jsは自動的にこのページにリダイレクトします。 パーソナライズされた404ページの例を次に示します。
サーバー側からのデータフェッチ
Next.jsを使用すると、クライアント側でデータをダウンロードする代わりに、初期データの入力を実行できます。これは、サーバーから既に入力されているデータを含むページを送信することを意味します。
サーバー側のデータフェッチを実装するには、次のXNUMXつの選択肢があります。
- データはリクエストごとにフェッチする必要があります。
- 建設プロセス全体で一度だけデータを取得します(静的サイト)
リクエストごとにデータを取得する
getServerSidePropsメソッドは、各リクエストをサーバー側でレンダリングするために使用されます。 この関数は、コンポーネントファイルの最後に含めることができます。 Next.jsは、その関数がコンポーネントファイルに存在する場合、コンポーネントの小道具にgetServerSidePropsオブジェクトを自動的に入力します。
ビルド時にデータを取得する
getStaticPropsメソッドは、ビルド時にサーバー側をレンダリングするために使用されます。 この関数は、コンポーネントファイルの最後に含めることができます。 このメソッドはサーバーコードを実行し、サーバーにGETリクエストを送信しますが、プロジェクトが終了したときにXNUMX回だけです。
なぜNext.jsを学ぶ必要があるのですか?
この理由のXNUMXつは、Next.jsがReact、のフロントエンド開発ツールキットの上に構築されているためです。 ユーザーインターフェイスの作成 これは、Webアプリを設計するための私のお気に入りの選択肢です。
しかし、Next.jsがそれをうまくやっていないとしたら、それだけでは十分ではありません…そうですか?
それで、それは正確に何をしますか?
それを理解するために、最初にいくつかの概念を定義する必要があります。 Next.jsは、多くのWeb開発者がクライアント側のWebアプリ(ブラウザー内)で抱えていた問題を解決したため、人気を博しました。 これらのシングルページアプリケーション(SPA)は、ユーザーがページをリロードする必要がなく、より多くの対話性を可能にするため、より優れたエクスペリエンスを提供しました。
ただし、このようなアプリの素材の大部分は、ブラウザーで実行された場合にのみ表示されるため、Webクローラーはこのようなアプリのテキストコンテンツを理解するのに苦労します。
その結果、その人気にもかかわらず、多くのSPAは、Googleなどの大手検索エンジンに対してほとんど匿名のままでした。 Next.jsには、Reactコンポーネントのサーバーサイドレンダリング(SSR)用のより堅牢な組み込みメカニズムが含まれるようになりました。
Next.jsを使用すると、開発者はビルドプロセス中にサーバー上でJavaScriptコードを構築し、基本的なインデックス可能なHTMLをユーザーに提供できます。
メリット
- ユーザーエクスペリエンスに最適
- SEOに最適
- 動的なように動作する超高速の静的Webサイトを構築する
- UIとUXを構築する際の柔軟性。
- 多くの開発上の利点
- 素晴らしいコミュニティサポート
デメリット
- Webサイトまたはアプリケーションには、構築または開発するための一定の時間があります。
- 特定のタスクでは、Next.jsは不十分です。 開発者は、Node.jsツールを使用して動的ルートを構築できる必要があります。
まとめ
ご覧のとおり、Next.jsはReactアプリの開発を簡素化し、アプリのロジックとUIという最も重要なことに集中できるようにします。 これには、現代的でフロントエンドが豊富でAPIを利用したアプリを作成するために必要なすべてのものが含まれています。
静的なHTMLページを作成できるため、ブログやビジネスWebサイトなどのコンテンツのみのプロジェクトにも適しています。
現在のエディションでは、Next.jsは高レベルの開発者エクスペリエンスを維持するだけでなく、ビジュアルパフォーマンスとユーザーエクスペリエンスを向上させるためのツールも提供し、このフレームワークの明るい未来を保証します。
コメントを残す