ファーストビュー画像
ヘッダーロゴ
GitHubアイコン
ホームアイコン
>
ブログ構築
>
microCMS × Next.js14(App Router)でブログ構築 2 ~Next.js環境構築~
ブログ構築

microCMS × Next.js14(App Router)でブログ構築 2 ~Next.js環境構築~

作成日2024/05/30
更新日2024/06/02
アイキャッチ
# Next.js
# microCMS

目次

前回の記事ではmicroCMSでブログAPIを作成しました。
今回はNext.jsの環境構築を行なっていきます。

今回作成したリポジトリはこちらから

Next.jsのプロジェクト作成

nodeのバージョンは 20.10.0, パッケージ管理はnpmを使っていきます。
Next.jsのバージョンは14.2.3を使用しています。

npxでNext.jsプロジェクト作成を行います。

$ npx create-next-app@latest

プロジェクト名を聞かれるので、デフォルトでよければエンターを押します。
今回はnext-blogとします。

? What is your project named? › next-blog

TypeScriptを使用するかはYesとします。

? Would you like to use TypeScript? › No / Yes

ESLintを使用するかはYesとします。
ESLintとはコードが規約に沿って書かれているかチェックをする静的解析ツールです。

? Would you like to use ESLint? › No / Yes

Tailwind CSSを使うかはYESとします。
Tailwind CSSはCSSフレームワークで今回はこれを使ってスタイルを当てていきます。

? Would you like to use Tailwind CSS? › No / Yes

srcディレクトリを使うかはYESとします。
YESとすることで、package.jsonなど設定用のファイル以外はsrcフォルダ配下に作られます。

? Would you like to use `src/` directory? › No / Yes

App Routerを使うかはYESとします。
App RouterはNext.js13より導入された機能でappディレクトリ配下にコードを作成していきます。

? Would you like to use App Router? (recommended) › No / Yes

ファイルをインポートする際のエイリアス設定はNoとしてデフォルトの@を使用します。
プロジェクトディレクトリからのファイルパスを@/pathのように指定できます。

? Would you like to customize the default import alias (@/*)? › No / Yes

最終的な設定は次のようになります。

この状態でエンターを押すと、設定した内容でNext.jsのプロジェクトが作成されます。

プロジェクトに移動します。

$ cd next-blog

npm run devでプロジェクトを立ち上げます。

$ npm run dev

> next-blog@0.1.0 dev
> next dev

  ▲ Next.js 14.2.3
  - Local:        http://localhost:3000

 ✓ Starting...
 ✓ Ready in 2.1s

localhost:3000にアクセスし、Next.jsの初期画面が表示されればプロジェクト作成は完了です。

デフォルトの設定を変更　

プロジェクト作成後、ディレクトリの階層は次のようになっています。
commitはこちら

next-blog/
├ .next
├ node_modules
├ public
├ src
.
.
設定ファイル

src/app/globals.cssを開きます。
Tailwind CSSを読み込んでいる3行のみを残して全ての記述を削除します。

@tailwind base;
@tailwind components;
@tailwind utilities;

// ↓これ以降を削除
:root {

src/app/page.tsxを開きます。
returnしている()内を全て削除します。仮でトップページと表示させておきます。

export default function Home() {
  return (
    <div>トップページ</div>
  )
}

もう一度localhost:3000にアクセスして、背景などのスタイルが消えて文字のみ表示されていれば完了です。
commitはこちら

フォントを変更

src/app/layout.tsxを開きます。このファイルでは各ページ共通のレイアウトを作成することができます。
デフォルトでInterというフォントが設定されているので、Noto_Sans_JPという日本語向けのフォントに変更します。

import type { Metadata } from "next";
import { Noto_Sans_JP } from "next/font/google"; //変更
import "./globals.css";

const notoSansJp = Noto_Sans_JP({ subsets: ["latin"] }); // 変更

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ja"> {/* 変更 */}
      <body className={notoSansJp.className}>{children}</body> {/* 変更 */}
    </html>
  );
}

これでフォントの変更は完了です。　
commitはこちら

Prettierを導入する

インストール

コードを自動整形するためにPrettierを導入します。
Prettierは開発環境でしか使わないので-Dオプションをつけています。

$ npm i -D prettier

設定ファイルを作成

プロジェクトのルートに.prettierrc.jsonという設定ファイルを作成します。
設定内容は以下のようにしていますが、好みで変更していただいて大丈夫です。

{
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "endOfLine": "auto"
}

設定項目について軽く説明します。

"tabWitdh": 2 - インデントの文字数を2としています。
"semi": false - コード末尾のセミコロンをつけないようにしています。
"singleQuote": true - シングルクォーテーションを使うようにしています。
"endOfLine": "auto" - コードの末尾に空白行を入れるようにしています。

フォーマットコマンドを追加

package.jsonにPritterでのフォーマット用のコマンドを追加します。
npm run prettierを実行することでsrcディレクトリ配下のコードを設定ファイルに従ってフォーマットしてくれます。

{
  ...
  "scripts": {
    ...
    "prettier": "prettier --write src"
  }
  ...
}

ファイル保存時に自動でフォーマット設定

毎回フォーマットコマンドを実行しなくてもいいようにvscodeでファイル保存時にフォーマットが走るように設定します。

vscodeの拡張機能Prettier - Code formatterを追加します。

追加後、プロジェクトルートに.vscodeフォルダを作成し、その中にsettings.jsonファイルを以下の内容で作成します。

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

"editor.formatOnSave": trueでは保存時にフォーマットを行う設定をオンにしています。
"editor.defaultFormatter": "esbenp.prettier-vscode"はフォーマッターに先ほどインストールした拡張機能のPrettierを使うようにを指定しています。

作成後、vscodeを再起動もしくは画面をリロードすることでファイル保存時に.prettier.jsonの内容でフォーマットを行なってくれます。
フォーマットが行われない場合は.vscodeフォルダが現在開いているプロジェクトルートにあるか確認してみてください。

これでPrettierの導入は完了です。
commitはこちら

ESLintの設定を追加する

プロジェクト作成時にESLintを使うよう指定していたのでデフォルトで.eslintrc.jsonファイルが作成されています。

{
  "extends": "next/core-web-vitals"
}

TypeScriptのフォーマット関連のパッケージを追加

$ npm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

追加したパッケージには下記の用途で使います。

@typescript-eslint/eslint-pugin - TypeScriptの推奨ルール
@typescript-eslint/parser - TypeScriptを解析するパーサー

インストール後、.eslintrc.jsonを以下のように変更します。

{
  "extends": [
    "eslint:recommended",
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "parserOptions": {
    "project": true
  }
}

pluginsに先ほどインストールした@typescript-eslintを追加します。
extendsにplugin:@typescript-eslint/recommendedとして追加することでTypeScriptで推奨されてるルールを追加します。
また、通常のESLintの推奨ルールのeslint:recommendedも追加しています。

parserOptionsのprojectにtrueを設定することで、プロジェクトルートのtsconfig.jsonに記載されているTypeScriptの設定を読み込んでくれます。

Prettierと併用するための設定

ESLintと先ほどインストールしたPrettierでルールが競合してしまうことがあるので、併用して使えるように設定していきます。

eslint-config-prettierをインストールします。

$ npm i -D eslint-config-prettier

.eslintrc.jsonのextendsの最後にprettierを追加します。
extendsの最後に追加することで他の設定をPrettierのルールに上書きします。

{
  "extends": [
    "eslint:recommended",
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended",
    "prettier" // 追加
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "parserOptions": {
    "project": true
  }
}

ファイル保存時に自動修正を行うための設定

ESLintの拡張機能をインストールします。

Prettierの時と同じように.vscode/settings.jsonに設定を追加します。

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": { // ここから3行追加
    "source.fixAll.eslint": "explicit"
  }
}

追加後、vscodeを再起動または、画面をリロードすることでファイル保存時に設定したルールでESLintの自動修正が行われるようになります。

Tailwind CSSの設定

最後にTailwind CSSを適切な記述、順番に変更してくれる設定を行います。

eslint-plugin-tailwailndcssをインストールします。

$ npm i -D eslint-plugin-tailwindcss

.eslintrc.jsonのextendsに追加します。

{
  "extends": [
    "eslint:recommended",
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended",
    "plugin:tailwindcss/recommended", // 追加
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "parserOptions": {
    "project": true
  }
}

これにより、ファイル保存時に
- max-w-[1280px]をmax-w-screen-xlに修正
- items-center flexをflex items-centerに並び替え
のように自動で修正、flex blockなど重複した指定に対し、警告を出してくれます。

これでESLintの設定は完了です。
commitはこちら

以上でNext.jsの環境構築は完了です。
次回はmicroCMSのAPIを使って記事を表示していきます。

share on
xアイコンfacebookアイコンlineアイコン
ホームアイコン
ホーム
同じカテゴリの記事
アイキャッチ
microCMS × Next.js14(App Router)でブログ構築 4 ~レイアウト作成(Tailwind CSS)~
アイキャッチ
microCMS × Next.js14(App Router)でブログ構築 3 ~microCMSとの接続設定~
アイキャッチ
microCMS × Next.js14(App Router)でブログ構築 1 ~microCMS API作成~