Zenn
Open3

Next.js開発のメモ

Next.js
Tailwind CSS
taichi fukumototaichi fukumoto

Next.jsのlocalhostで任意のポート番号を指定する方法

いくつかの開発を同時に行なっていると、たまにPort 3000 is already in use.と言われることがあるので、ポート番号の指定方法をメモしておく。

プロジェクトのpackage.jsonのscriptsを編集する

package.json
{
  ︙
  "scripts": {
-   "dev": "next dev",
+   "dev": "next dev -p 3333",
    ︙
  },
  ︙
}

このようにdevのバリューをnext -p ポート番号に書き換えることで任意のポート番号でローカルサーバーを起動することができる。
上記の例だと、http://localhost:3333/のローカルサーバーが立ち上がる。

taichi fukumototaichi fukumoto

create-next-appをnpmで行うオプション

急にcreate-next-appでがyarnで行われ、yarn.lockが生成されるようになった。
create-next-appでは、package-lock.jsonを生成したいので、以下のようにオプションをつけてcreate-next-appを行う。

% npx create-next-app prj-name --typescript --use-npm

ちなみに--typescriptオプションでTypeScript化されたプロジェクトを始めることができる。

taichi fukumototaichi fukumoto

Next.jsにTailwind CSSを導入する手順

プロジェクトのスタイリングには、Tailwind CSSを使用するので導入していく。

Tailwind をnpm installする

まず、Tailwind CSSのパッケージをnpmでインストールする。

% npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

設定ファイルの生成

tailwind.config.jsとpostcss.config.jsを作成する。-pオプションでpostcss.config.jsを同時に生成できる。

% npx tailwindcss init -p

tailwind.config.jsとpostcss.config.jsファイルが作成されればOK。

tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

パージの設定をする

tailwind.config.jsファイルの中で、すべてのページとコンポーネントへのパスでパージオプションを設定し、本番ビルドで未使用のスタイルをツリーシェイクできるようにする。（ツリーシェイク=実行されいないコードを削除すること）

tailwind.config.js
module.exports = {
- purge: [],
+ purge: [
+   "./src/pages/**/*.{js,ts,jsx,tsx}",
+   "./src/components/**/*.{js,ts,jsx,tsx}",
+   "./src/styles/*.css",
+ ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Just-in-Time Modeを有効にする

tailwind.config.jsにmode: "jit"を追記し、Just-in-Time Modeを有効にする。

tailwind.config.js
module.exports = {
+ mode: "jit",
  purge: [
    "./src/pages/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,ts,jsx,tsx}",
    "./src/styles/*.css",
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

global.cssでTailwindをインポートする

global.cssの冒頭に以下の3行を追記する

global.css
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;