この記事について この記事では、Next.js プロジェクトを 0 から立ち上げる際の手順を説明しています。 create-next-app で TypeScript の Next.js プロジェクトを作成し、Tailwind CSS を導入していきます。 またこの記事は、株式会社 UnReact のアドベントカレンダー 24 日目の記事です。 前提条件 Next.js に関する基礎的な知識がある Tailwind CSS に関する基礎的な知識がある Volta で Node.js / npm をインストールしている Volta についてはこちらの記事をご覧ください。(絶対に Volta が必要だというわけではありません。) Next.js プロジェクトの立ち上げ まずは、create-next-app でプロジェクトを立ち上げます。 Node.js と npm のバージョン確認 まず、N
![Next.js 12 × TypeScript × Tailwind CSS のテンプレートを作成する](https://cdn-ak-scissors.b.st-hatena.com/image/square/ebcd5bfc78462f45b974b5972c295acb4b4bd77f/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--f6yLSNAx--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3ANext.js%25252012%252520%2525C3%252597%252520TypeScript%252520%2525C3%252597%252520Tailwind%252520CSS%252520%2525E3%252581%2525AE%2525E3%252583%252586%2525E3%252583%2525B3%2525E3%252583%252597%2525E3%252583%2525AC%2525E3%252583%2525BC%2525E3%252583%252588%2525E3%252582%252592%2525E4%2525BD%25259C%2525E6%252588%252590%2525E3%252581%252599%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Ataichi%252520fukumoto%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2RiZTU1OWFmNjIuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)