Как Next.js узнает, что папка (site) содержит главную страницу? По умолчанию Next.js ожидает, что все страницы приложения находятся в папке pages, которая должна быть расположена в корне проекта. Однако, если вы хотите использовать другую папку, например, src/site, вы можете настроить это с помощью изменения структуры проекта и конфигурации. 1. Использование папки src Если вы хотите, чтобы Next.js искал страницы в папке src/site, вам нужно убедиться, что папка src используется как корневая директория. Next.js автоматически поддерживает структуру, где папка src содержит папку pages. Например: javascript В этом случае Next.js автоматически найдет папку pages внутри src/site и будет использовать её для маршрутизации. 2. Настройка кастомной директории Если вы хотите,…
Read MoreРубрика: Программы на PHP
Есть сайт на нем фронт на nextjs поднят в папке src/(site) и он такой «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> ); } Объяснение кода и структуры проекта Ваш код представляет собой компонент главной страницы (Home) в приложении Next.js, который использует Material-UI (@mui/material) для стилизации. Давайте разберем его по частям: 1. Ключевая строка «use client»; Эта строка указывает, что компонент рендерится на стороне клиента. В Next.js, начиная с версии 13, используется концепция серверных и клиентских компонентов. Если вы хотите, чтобы компонент работал с клиентскими библиотеками (например, Material-UI), необходимо явно…
Read MoreГлавный файл в Next.js
В Next.js главный файл, который отвечает за рендеринг вашего приложения, называется pages/_app.js. Этот файл позволяет вам настраивать и оборачивать все страницы вашего приложения, добавляя общие компоненты, такие как навигация или стили. Основные функции pages/_app.js: Пример содержимого файла pages/_app.js: javascript Другие важные файлы Таким образом, pages/_app.js является ключевым файлом для настройки вашего приложения на Next.js.
Read MoreСоздай сайт на nextjs с файлом .env в котором указан PORT под 80 и апи доступ NEXT_PUBLIC_BACKEND_URL=»http://localhost:3000/api»
Создание сайта на Next.js с использованием .env файла Вот пошаговая инструкция для создания сайта на Next.js с настройкой .env файла, где указан порт 80 и API-доступ через переменную NEXT_PUBLIC_BACKEND_URL. 1. Установка Next.js Сначала создайте новый проект Next.js. Для этого выполните следующую команду в терминале: bash Перейдите в созданную папку: bash 2. Создание .env файла Создайте файл .env в корне проекта и добавьте в него следующие строки: javascript Примечание: Переменные, начинающиеся с NEXT_PUBLIC_, автоматически становятся доступными на стороне клиента в Next.js. 3. Настройка порта По умолчанию Next.js запускается на порту 3000. Чтобы изменить порт на 80, можно использовать переменную окружения PORT. Для этого добавьте в package.json следующую команду в…
Read MoreДобавить jwt авторизацию в Api на фронте
Чтобы добавить JWT авторизацию в ваш API с использованием RTK Query и fetchBaseQuery, нужно передавать токен в заголовках запросов. Это можно сделать, настроив fetchBaseQuery для добавления токена в каждый запрос. Вот как это можно реализовать: Шаги для добавления JWT авторизации Обновленный код javascript Объяснение изменений Дополнительно: Обработка ошибок авторизации Если токен недействителен или истек, сервер может вернуть ошибку 401 (Unauthorized). Вы можете обработать это, добавив baseQuery с обработчиком ошибок: javascript Теперь ваш API поддерживает JWT авторизацию! 🎉
Read MoreКак реализовать в nestjs авторизацию jwt с ролями доступа к API. Например student имеет доступ только просматривать оценки, а teacher имеет доступ их ставить. Для доступа к данным используем prisma
Реализация JWT авторизации с ролями в NestJS с использованием Prisma В этом примере мы создадим систему авторизации с использованием JWT в NestJS, где роли (student и teacher) будут определять доступ к API. Мы будем использовать Prisma для работы с базой данных. Шаг 1: Установка необходимых пакетов Установите зависимости для работы с JWT: bash Шаг 2: Настройка Prisma модели Добавьте модель пользователей с ролями в файл prisma/schema.prisma: prisma После этого выполните миграцию: bash Шаг 3: Создание модуля аутентификации Шаг 4: Реализация ролей Шаг 5: Пример использования ролей в контроллере Шаг 6: Тестирование Теперь у вас есть система авторизации…
Read Moreprisma подключается к mysql как указать env
Чтобы Prisma могла подключаться к базе данных MySQL, необходимо указать строку подключения в переменной окружения DATABASE_URL. Это делается в файле .env, который находится в корне проекта. Вот как это сделать: Шаг 1: Настройка строки подключения в .env Шаг 2: Убедитесь, что MySQL настроен для удаленного подключения (если база данных не локальная) Если вы подключаетесь к удаленной базе данных, убедитесь, что MySQL настроен для приема внешних подключений. Для этого: Шаг 3: Проверка подключения Prisma После настройки строки подключения выполните команду для проверки соединения: bash Эта команда подтянет схему базы данных в файл schema.prisma. Если подключение…
Read MoreСоздание сайта на NestJS с использованием Docker, Prisma и API для работы с таблицами
Давайте создадим проект на основе вашего SQL-кода. Мы будем использовать NestJS для создания API, Prisma для работы с базой данных и Docker для контейнеризации приложения. Шаг 1: Инициализация проекта NestJS Шаг 2: Установка Prisma Шаг 3: Настройка базы данных Шаг 4: Создание модулей и сервисов в NestJS Шаг 5: Настройка Docker Шаг 6: Тестирование API Теперь у вас есть готовый проект на NestJS с использованием Docker и Prisma для работы с таблицами!
Read MoreПроблема с типом данных BigInt в Prisma
Ваша проблема связана с тем, что тип данных Int в Prisma соответствует 32-битному целому числу, которое имеет диапазон от -2,147,483,648 до 2,147,483,647. Если значение osmId превышает этот диапазон, то возникает ошибка, так как оно выходит за пределы допустимого диапазона. Решение: Использование типа BigInt Для работы с большими числами, которые выходят за пределы диапазона Int, Prisma поддерживает тип данных BigInt. Вы можете изменить тип поля osmId на BigInt в вашей модели следующим образом: prisma Шаги для внесения изменений: Использование в коде TypeScript В TypeScript значения BigInt представлены специальным типом bigint. Если вы используете Prisma Client для работы с этим полем, убедитесь, что вы правильно обрабатываете…
Read Moreпример с Select2 в yii2
Для реализации поля с использованием Select2 в Yii2, где можно выбирать нескольких участников, приведу пример. Select2 — это мощный jQuery-плагин, который заменяет стандартные выпадающие списки, добавляя поддержку поиска, множественного выбора и других функций. 1. Установка Select2 В Yii2 можно использовать расширение kartik-v/yii2-widget-select2, которое упрощает интеграцию Select2.Установите его через Composer: bash 2. Модель В модели укажите поле participants как массив, чтобы поддерживать множественный выбор: php 3. Контроллер Передайте список участников в представление. Например: php 4. Представление Используем виджет Select2 для отображения поля с множественным выбором: php 5. Сохранение и загрузка данных При сохранении данных из формы значения будут переданы как массив. В контроллере…
Read More