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

disel

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

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

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

bash

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

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

bash

1
cd my-next-app

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

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

javascript

1
2
src/
├── app/

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

bash

1
mkdir -p src/app

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

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

bash

1
mkdir -p src/app/(site)

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

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

bash

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

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

javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
"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

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

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

javascript

1
2
3
4
5
6
7
8
9
10
11
12
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

1
mkdir -p src/components

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

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

bash

1
touch src/components/MainContent.js

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

javascript

1
2
3
4
5
6
7
8
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

1
touch src/app/globals.css

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

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@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

1
2
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

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

javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/** @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

1
npm run dev

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

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

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