npx create-next-app@latest my-app
npx create-next-app@latest --ts my-app
NEXT JS アプリのビルドを高速化させるターボパックを追加するには with-turbopack オプションを追加します
npx create-next-app@latest my-app --ts with-turbopack
turbopack でビルドを行うには次のコマンドを実行します
next dev --turbo
npx create-next-app -e with-tailwindcss my-project
-e オプションはこちらのリポジトリからデータを持ってきます https://github.com/vercel/next.js/tree/master/examples
公式のリポジトリにサンプルがないためまずTypeScriptでアプリを作成してその後にTailWindを追加します
npx create-next-app@latest --ts my-app
cd my-app
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p
module.exports = {
mode: 'jit',
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
import 'tailwindcss/tailwind.css';
return (
<div className="text-red-500 text-4xl sm:text-6xl lg:text-7xl leading-none font-extrabold tracking-tight mt-10 mb-8 sm:mt-14 sm:mb-10">テストです</div>
)
IntelliSense for CSS class names in HTML を無効にしましょう