「Next.js」について
Next.jsとは
Next.jsはReactのフレームワークであり、Reactアプリケーションをより柔軟に、より拡張可能にするために開発されました。ビルドプロセス、ルーティング、サーバーサイドレンダリングなどの機能がデフォルトで備わっており、簡単に使うことができます。
Next.jsは、ウェブアプリケーションやウェブサイトの開発に適しています。Next.jsは、オープンソースであり、Facebookによって保守されています。
Next.jsの特徴
- サーバーサイドレンダリング (SSR): サーバーサイドでReactを実行することにより、ページの読み込み速度を高速化します。
- 静的ファイル生成 (SSG): コンパイル時に静的なHTMLファイルを生成することにより、ページの読み込み速度を高速化し、サーバーの負荷を下げます。
- 自動コードスプリッティング: ページごとに必要なJavaScriptファイルを自動的に切り分け、必要なときに必要なファイルをダウンロードするため、読み込み速度を高速化します。
- CSS-in-JSの統合: Next.jsでは、CSS-in-JSライブラリを使うことができます。これにより、デフォルトのスタイリングを維持しながら、コードをシンプルに保ちます。
Next.jsの利用例
Next.jsはどのような場面で利用されるのでしょうか？以下にいくつかの例を紹介します。
ウェブアプリケーション開発
React.jsがリリースされたのは、既に5年以上前になります。React.jsは非常に人気があるライブラリであり、多くのフレームワークやライブラリが開発されています。次のようなウェブアプリケーション開発にNext.jsを使うことができます。
- eコマースサイトの開発
- フロントエンドドキュメントライブラリの開発
- ブログサイトの開発
- 地図アプリケーションの開発
既存のReactアプリケーションの最適化
Next.jsは、Reactアプリケーションをより優れたものにするために開発されたフレームワークです。したがって、既存のReactアプリケーションにNext.jsを統合することにより、すでに存在するアプリケーションにSSRやSSGの機能などを導入することができ、パフォーマンスを向上させることができます。
Next.jsの基本的な使い方
インストール
Next.jsを使うには、まずNode.jsをインストールする必要があります。Node.jsがインストールされたら、以下のコマンドでNext.jsをインストールすることができます。
npm install next react react-dom
基本的な設定
Next.jsのプロジェクトを作成するには、以下のコマンドを実行します。
npx create-next-app
プロジェクトが作成されたら、以下のようなフォルダ構成になります。
my-app
├── node_modules
├── pages
│ ├── api
│ ├── index.js
│ └── user.js
├── public
│ ├── vercel.svg
│ └── favicon.ico
├── styles
│ ├── globals.css
│ └── Home.module.css
├── .gitignore
├── package.json
├── README.md
└── yarn.lock
- pages: Reactコンポーネントが含まれるフォルダです。ページが自動的にビルドされます。
- public: 静的ファイルを含むフォルダです。そのままアクセス可能です。
- styles: CSSファイルを含むフォルダです。
ページの作成
Next.jsでは、pagesディレクトリにページを作れば、自動的にルーティングが設定されます。例えば、以下のようなファイルを作成すると、/aboutへのアクセスができるようになります。
pages/about.js
function About() {
return (
<div>
<h1>Aboutページ</h1>
<p>ここはAboutページです。</p>
</div>
);
}
export default About;
サーバーサイドレンダリング
Next.jsでは、サーバーサイドでReactを実行することができます。これにより、サイトの読み込み速度が高速化されます。例えば、以下のようなコードを書くことによって、サーバーサイドレンダリングが可能になります。
function Index({ products }) {
return (
<div>
<h1>商品一覧</h1>
<ul>
{products.map(({ id, title }) => (
<li key={id}>{title}</li>
))}
</ul>
</div>
);
}
Index.getInitialProps = async ({ req }) => {
const res = await fetch('https://api.example.com/products');
const json = await res.json();
return { products: json };
};
export default Index;
上記のコードではgetInitialPropsを使ってサーバーサイドでデータを取得します。ページの読み込み時に、サーバーサイドでデータを取得し、ページを生成します。
静的ファイル生成
Next.jsでは、静的なHTMLファイルを生成することができます。これにより、ページの読み込み速度が高速化され、サーバーの負荷を軽減できます。例えば、以下のようなコードを書くことによって、静的ファイル生成が可能になります。
function Index({ products }) {
return (
<div>
<h1>商品一覧</h1>
<ul>
{products.map(({ id, title }) => (
<li key={id}>{title}</li>
))}
</ul>
</div>
);
}
Index.getInitialProps = async ({ req }) => {
const res = await fetch('https://api.example.com/products');
const json = await res.json();
return { products: json };
};
export async function getStaticProps() {
const res = await fetch('https://api.example.com/products');
const json = await res.json();
return { props: { products: json } };
}
export default Index;
上記のコードのgetStaticPropsを使って、HTMLファイルを生成します。このようにして生成されたHTMLファイルは、後で動的に取得することができます。
コンポーネントの最適化
React.jsは、パフォーマンスの問題がある場合があります。しかし、Next.jsはいくつかの最適化機能を備えています。例えば、自動的にコードスプリッティングが行われるため、最初に必要なコードのみを読み込んで、後から必要になったコードをダウンロードすることができます。また、デフォルトでstyled-componentsやemotionといったCSS-in-JSライブラリを使うことができるため、コードの書き方がシンプルになり、コードの最適化が容易になります。
まとめ
Next.jsは、Reactアプリケーションをより柔軟に、より拡張可能にするためのフレームワークです。ビルドプロセス、ルーティング、サーバーサイドレンダリングなどの機能がデフォルトで備わっており、簡単に使うことができます。また、SSRやSSGの機能を備えているため、サイトの読み込み速度を高速化することができます。Next.jsを使うことにより、Reactアプリケーションをより優れたものにすることができます。
【参考リンク】