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をインストールできます。 Next.jsアプリケーションを作成する最も簡単な方法は、Create-Next-App(CNA)を使用することです。 CNAを使用した、基本的なNext.jsアプリケーション作成は以前に解説しましたので、下記を参照して下さい。 CNAを使用したくない理由がある場合、または単にNext.jsアプリをゼロから作成したい場合は、プロジェクトの初期化中に常にCNAを使用する必要はありません。 Next.jsプロジェクトを作成する2つ目の方法は、手動で行うことです。 まず、プロジェクトディレクトリを作成し、npmを使用して必要な依存関係をインストールする必要があります。 ターミナルを開き、下記のコマンドを実行して、Next.jsアプリケーションを格納する新しいプロジェクトフォルダを作成します。 新しい空のディレクトリを作成しましたら、npm init でNodeプロジェクトを初期化します。 このコマンドは、プロジェクトディレクトリのルートに 次に、 下記コマンドでそれらすべてを一度にインストールできます。 インストールが完了すると、プロジェクトに新しい このディレクトリには、プロジェクトにインストールされているすべての依存関係が保存されます。 中身を確認すると、インストールした3つのnpmパッケージとそれらのすべてのサブ依存関係がそこにあることがわかります。 依存関係がインストールされたので、アプリケーションを起動する方法が必要となります。 devスクリプトは、開発モードの時にアプリケーションを実行するために使用されます。 開発プロセスをより快適にする、特別なエラー処理、ホットリロード、およびその他の機能を使用してコードが実行されることを意味しています。 ・ dev: 開発モードでNext.jsを起動します。 ・ start: 本番モードでNext.jsを起動します。 ・ build: 本番用のNext.jsアプリをビルドします。 ですが、今の段階でnpm run devでコマンドを実行するとエラーがスローされます。 Next.jsは、あなたのWebサイトのすべての異なるパスを保持する それが、見つからなかったときにエラーを投げるためです。 ですので新しく その中に新しいファイルを追加します、 アンダースコアを先頭に持つ特別なカスタムページであり、 Next.jsでは、このコンポーネントを利用して、ページを初期化します。 下記のように記述して下さい。 同じ階層で Next.jsがレンダリングできるように、/pages/index.jsファイルにいくつかのコードを追加する必要があります。 任意のテキストエディタで/pages/index.jsを開き、下記コードをファイルに追加してください。 pagesフォルダには自動的にindex.jsというページがあり、アプリケーションの開始点である/に自動的にルーティングされます。 しかし、ページ間で異なるindex.jsを持つことができますが、基本的には各フォルダに1つずつです。 それでは、設定してきたのがしっかりと動作するのか、アプリを実行します。 任意のブラウザで 手動セットアップのNext.jsアプリをカスタマイズして高度な機能を使用する方法については、 こちらの Next.jsドキュメントを参照してください。 お疲れ様でした、おめでとうございます。 これで、あなたはデフォルトのNext.jsプロジェクトを使用していく準備が整いました。 プロジェクトルートに新しく、stylesフォルダ作成しその中でCSSまたはSCSSファイルを管理して下さい。 Next.jsのディレクトリについて詳しく理解したい場合、下記で解説しております。 超高速で安全なSEOとして重点を置いたアプリケーションを作成したいと仮定した場合、Next.jsは最も最適です。 手動で始めるのは、さほど難しい事ではありません。 手動セットアップの場合、アプリをカスタマイズして高度な機能を使用していけます。 create-next-appでは数秒で新しいNext.js アプリを作成可能であり、依存関係もありません。 CNAはNext.jsの作成者によって、公式で維持されており、多くの利点がございます。 Next.jsアプリケーションの構築をすばやく開始したい場合は、手動はお勧めしません。 ですがどちらも、Next.jsから始めるのは簡単で、心配する必要はありません。 開発者向けの多くの例を含む優れたドキュメントがあります。 本日は以上となります。 最後まで読んで頂きありがとうございます。
Next.jsとは
前提条件
Next.jsプロジェクトを手動で作成
mkdir my-next-app
↓
cd my-next-app
npm init -y
// or
yarn init -y
package.jsonファイルを作成します。Next、React、react-domのnpmパッケージが必要となります。
npm install next react react-dom
// or
yarn add next react react-dom
node_modulesディレクトリが作成されていることがわかります。package.jsonファイルを開き、scriptsに下記のように追加します。
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
/pagesディレクトリを探します。/pagesディレクトリを作成し、Next.jsがレンダリングできるページを追加する必要があります。
mkdir pages
cd pages
_app.jsファイルを作成します。_app.jsファイルでは pagesフォルダに存在する、カスタムコンポーネントです。
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;
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>
)
}
npm run dev
http://localhost:3000にアクセスしてください。
/📁 styles
├ Home.module.css
├ global.css
/📁 hooks
├ useCustomHook.js
最後に
