LoginSignup
2
1

More than 1 year has passed since last update.

Next.jsとTypescriptとtailwindを組み合わせた開発環境をつくりたい

Last updated at Posted at 2023-03-13

Next.js、TypeScript、Tailwind CSSを組み合わせた開発環境を構築する基本的な手順を紹介します。

1.Node.jsとnpmをインストールする

最初に、Node.jsとnpmをインストールする必要があります。npmは、パッケージ管理システムであり、Node.jsと一緒にインストールされます。詳しいインストール方法については、Node.jsの公式サイトを参照してください。

2.Next.jsプロジェクトを作成する

ターミナルで、以下のコマンドを実行して、Next.jsプロジェクトを作成します。

npx create-next-app my-app --example with-typescript

このコマンドは、TypeScriptを使用したNext.jsのサンプルアプリケーションをダウンロードし、新しいプロジェクトを作成します。my-appは、プロジェクトの名前を指定する部分であり、任意の名前を指定できます。

3.Tailwind CSSをインストールする

ターミナルで、以下のコマンドを実行して、Tailwind CSSをインストールします。

npm install tailwindcss

4.Tailwind CSSの設定を追加する

Tailwind CSSを使用するには、設定ファイルを作成する必要があります。ターミナルで、以下のコマンドを実行して、設定ファイルを作成します。

npx tailwindcss init

これにより、tailwind.config.jsファイルが作成されます。このファイルには、Tailwind CSSの設定が含まれます。

5.CSSファイルを作成する

Next.jsでは、CSSファイルをグローバルにインポートする必要があります。ターミナルで、以下のコマンドを実行して、CSSファイルを作成します。

touch styles/globals.css

次に、globals.cssファイルに、以下のコードを追加します。

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

これにより、Tailwind CSSのスタイルがグローバルに適用されます。

6.Next.jsの設定を変更する

最後に、Next.jsの設定を変更して、TypeScriptとTailwind CSSを使用できるようにします。まず、以下のコマンドを実行して、必要なパッケージをインストールします。

npm install --save-dev typescript @types/react @types/node postcss-preset-env postcss-flexbugs-fixes

次に、プロジェクトのルートディレクトリに、以下のpostcss.config.jsファイルを作成します。

module.exports = {
  plugins: [
    "tailwindcss",
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        autoprefixer: {
          flexbox: "no-2009"
        },
        stage: 3,
        features: {
          "custom-properties": false
        }
      }
    ]
  ]
};

これにより、PostCSSと必要なプラグインを設定し、Tailwind CSSを使用できるようになります。

最後に、tsconfig.jsonファイルを更新して、TypeScriptの設定を変更します。以下のコードを追加します。

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/styles/*": ["styles/*"]
    }
  }
}

これにより、コンポーネントやスタイルのインポート時に、エイリアスを使用できるようになります。

以上で、Next.js、TypeScript、Tailwind CSSを組み合わせた開発環境の設定が完了しました。これらの技術を使って、Webアプリケーションを開発することができます。

7.プロジェクトを起動する

最後に、以下のコマンドを実行して、プロジェクトを起動します。

npm run build
npm run dev

これにより、開発用のサーバーが起動し、ブラウザでアプリケーションを確認できるようになります。

以上で、Next.js、TypeScript、Tailwind CSSを組み合わせた開発環境の構築が完了しました。必要に応じて、その他のパッケージやライブラリをインストールして、開発を進めていくことができます。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1