Вступление

npm run dev

Структура папок

.
├── app
│   ├── layout.tsx
│   └── page.tsx
├── public
│   └── favicon.ico
├── styles
│   └── globals.css
├── .eslintrc.json
├── .gitignore
├── next-env.d.ts
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.js
├── README.md
├── tsconfig.json
└── yarn.lock

Структура файлов

// Укажите путь к файлу стилей Tailwind CSS
import "../styles/globals.css";

export const metadata = {
  title: "Next 13",
  description: "Made in Fubon",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

export default function Home() {
  return <main className="container py-12">Hello World!</main>;
}

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

{
  "name": "next-13",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "20.1.0",
    "@types/react": "18.2.6",
    "@types/react-dom": "18.2.4",
    "autoprefixer": "10.4.14",
    "eslint": "8.40.0",
    "eslint-config-next": "13.4.1",
    "next": "13.4.1",
    "postcss": "8.4.23",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.2",
    "typescript": "5.0.4"
  }
}

Запустить локальный сервер

"scripts": {
  "dev": "next dev -H 192.168.x.1", // укажите свой локальный ip (ipconfig)
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
},

Настройки Tailwind CSS

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    container: {
      center: true,
      padding: {
        DEFAULT: "1rem", // md: '1rem',
        xs: "1rem",
        sm: "1rem",
        lg: "1rem",
        xl: "1rem",
      },
    },
    screens: {
      xs: "480px",
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
      "2xl": "1536px",
    },
    extend: {
      colors: {
        base: {
          DEFAULT: "#1B2C4E",
          primary: "#0070BA",
          secondary: "#EF7D00",
          success: "#22C55E",
          system: "#E2E8F0",
          alert: "#f43f5e",
        },
      },
      spacing: {
        13: "3.25rem",
        15: "3.75rem",
        128: "32rem",
        144: "36rem",
      },
    },
  },
  plugins: [],
};

Vercel Deploy

yarn add vercel

"vercel": "npx vercel --prod"

@Components

export { default as Footer } from "./footer";
export { default as Header } from "./header";

import { Footer, Header } from "@/components";

Tailwind Indicator

export default function TailwindIndicator() {
  if (process.env.NODE_ENV === "production") return null;

  return (
    <div className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-md bg-gray-800 p-3 px-2 font-mono text-xs text-white">
      <div className="block sm:hidden">xs</div>
      <div className="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden">sm</div>
      <div className="hidden md:block lg:hidden xl:hidden 2xl:hidden">md</div>
      <div className="hidden lg:block xl:hidden 2xl:hidden">lg</div>
      <div className="hidden xl:block 2xl:hidden">xl</div>
      <div className="hidden 2xl:block">2xl</div>
    </div>
  );
}