Как создать структуру проекта с src/app/(site) в Next.js

disel

Для создания структуры проекта с использованием папки src/app/(site) в Next.js, следуйте этим шагам:

1. Создайте новый проект Next.js

Если у вас еще нет проекта, создайте его с помощью команды:

bash

npx create-next-app@latest my-next-app

Перейдите в папку проекта:

bash

cd my-next-app

2. Переместите папку app в src

Next.js поддерживает использование папки src для организации файлов. Переместите папку app в директорию src:

javascript

src/
├── app/

Если папки app еще нет, создайте её вручную:

bash

mkdir -p src/app

3. Создайте папку (site)

Внутри папки src/app создайте папку (site):

bash

mkdir -p src/app/(site)

4. Создайте файл page.js

Файл page.js отвечает за рендеринг главной страницы. Создайте его в папке (site):

bash

touch src/app/(site)/page.js

Пример содержимого page.js:

javascript

"use client";

import Container from "@mui/material/Container";
import MainContent from "../../components/MainContent";

export default function Home() {
  return (
    <Container
      maxWidth="lg"
      component="main"
      sx={{ display: "flex", flexDirection: "column" }}
    >
      <MainContent />
    </Container>
  );
}

5. Создайте файл layout.js

Файл layout.js задает общий макет для всех страниц в папке (site). Создайте его:

bash

touch src/app/(site)/layout.js

Пример содержимого layout.js:

javascript

export const metadata = {
  title: "My Site",
  description: "This is my Next.js site with Tailwind CSS",
};

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

6. Создайте папку components

Создайте папку components для хранения компонентов:

bash

mkdir -p src/components

7. Создайте файл MainContent.js

Добавьте компонент MainContent в папку components:

bash

touch src/components/MainContent.js

Пример содержимого MainContent.js:

javascript

export default function MainContent() {
  return (
    <div>
      <h1>Welcome to My Site</h1>
      <p>This is the main content of the page.</p>
    </div>
  );
}

8. Добавьте глобальные стили

Создайте файл globals.css в папке src/app:

bash

touch src/app/globals.css

Пример содержимого globals.css:

css

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

body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

9. Настройте Tailwind CSS

Если Tailwind CSS еще не установлен, выполните следующие команды:

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Настройте файл tailwind.config.js:

javascript

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/app/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        foreground: "#333333",
        background: "#ffffff",
      },
    },
  },
  plugins: [],
};

10. Запустите проект

Запустите проект с помощью команды:

bash

npm run dev

Приложение будет доступно по адресу http://localhost:3000.

Теперь у вас есть структура проекта с использованием src/app/(site) и Tailwind CSS! 🎉 Если у вас возникнут вопросы, дайте знать! 😊

Похожие записи/страницы: