How to Build a Basic CRUD App with Next.js?

введение в этом руководстве мы пройдем через создание полного приложения crud (создание, чтение, обновление, удаление) с использованием next js для вашего фронтенда, в паре с back4app в качестве вашего бэкенд решения вы создадите проект под названием basic crud app nextjs , разработаете динамическую схему базы данных и интегрируете надежную функциональность crud в ваше приложение next js мы охватим все, от настройки вашего проекта back4app и проектирования коллекций до подключения вашего интерфейса next js с использованием parse sdk или методов rest/graphql к концу вы получите веб приложение, готовое к производству, с безопасной аутентификацией пользователей и эффективным управлением данными основные выводы создайте полное приложение crud с помощью next js и back4app научитесь проектировать гибкую схему бэкенда, адаптированную к вашим потребностям в данных используйте интуитивно понятный интерфейс администратора с функцией перетаскивания для управления данными узнайте о лучших практиках развертывания, включая контейнеризацию docker и интеграцию с github предварительные требования перед тем как начать, убедитесь, что у вас есть учетная запись back4app с новым проектом для получения рекомендаций обратитесь к начало работы с back4app https //www back4app com/docs/get started/new parse app среда разработки next js используйте create next app https //nextjs org/docs/api reference/create next app или аналогичный инструмент убедитесь, что node js (версии 14 или выше) установлен базовое понимание javascript, next js и интеграции api посетите документацию next js https //nextjs org/docs для общего обзора, если это необходимо шаг 1 – настройка вашего проекта инициализация нового проекта back4app войдите в свою учетную запись back4app нажмите кнопку “новое приложение” на вашей панели управления введите имя проекта basic crud app nextjs и следуйте инструкциям создать новый проект ваш новый проект появляется на панели управления, служа основой для вашего бэкенда создайте ваше приложение next js откройте терминал и выполните npx create next app\@latest basic crud app nextjs перейдите в каталог вашего проекта cd basic crud app nextjs эта команда настраивает фреймворк проекта next js, готовый к настройке шаг 2 – создание схемы вашей базы данных структурирование вашей модели данных для этого crud приложения вы создадите основные коллекции ниже приведены две основные коллекции с деталями полей, которые обеспечивают основные функции 1 коллекция предметов эта коллекция хранит информацию о каждом элементе поле тип данных описание ид идентификатор объекта автоматически сгенерированный уникальный идентификатор название строка название или заголовок элемента описание строка краткое резюме предмета создано в дата время создания элемента обновлено дата метка времени для последнего обновления 2 коллекция пользователей эта коллекция обрабатывает профили пользователей и данные аутентификации поле тип данных описание ид идентификатор объекта автоматически сгенерированный уникальный идентификатор имя пользователя строка уникальное имя пользователя для пользователя электронная почта строка уникальный адрес электронной почты хэш пароля строка безопасно захешированный пароль для аутентификации пользователя создано в дата время, когда была создана учетная запись обновлено дата метка времени для последнего обновления аккаунта вы можете вручную определить эти коллекции в панели управления back4app, создав новый класс для каждой коллекции и добавив соответствующие столбцы создать новый класс создайте поля, выбрав соответствующий тип данных, назвав столбец и установив значения по умолчанию или требования создать столбец использование ai ассистента back4app для настройки схемы ai ассистент back4app упрощает генерацию схемы базы данных опишите ваши желаемые коллекции и поля, и позвольте ассистенту автоматически сгенерировать структуру шаги для использования ai ассистента откройте ai ассистента найдите его в меню вашей панели управления back4app опишите вашу модель данных вставьте подробный запрос, описывающий ваши коллекции и требования к полям просмотрите и примените проверьте сгенерированную схему и внедрите ее в ваш проект пример запроса create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated primary key) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated primary key) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) этот метод не только экономит время, но и обеспечивает согласованность и оптимизацию вашей схемы шаг 3 – активация интерфейса администратора и функций crud изучение интерфейса администратора интерфейс администратора back4app предлагает решение без кода для управления вашими данными на сервере с его интуитивно понятной системой перетаскивания вы можете легко выполнять операции crud включение интерфейса администратора перейдите в раздел “дополнительно” на вашей панели управления back4app нажмите на “admin app” затем выберите “включить admin app ” настройте свои учетные данные администратора создав своего первого администратора это также устанавливает роли, такие как b4aadminuser и необходимые системные коллекции включить приложение администратора после активации войдите в интерфейс администратора, чтобы начать управлять вашими данными панель управления приложением администратора выполнение операций crud через интерфейс администратора в интерфейсе администратора вы можете создавать записи используйте кнопку «добавить запись» в коллекции (например, товары), чтобы вставить новые данные просматривать или обновлять записи нажмите на запись, чтобы просмотреть или изменить ее поля удалять записи используйте опцию удаления, чтобы удалить устаревшие записи этот упрощенный интерфейс делает управление данными простым и эффективным шаг 4 – подключение next js к back4app после настройки вашего бэкенда следующим шагом является подключение вашего приложения next js вариант a использование parse sdk установите parse sdk npm install parse инициализируйте parse в вашем приложении next js создайте файл (например, lib/parseconfig js ) // lib/parseconfig js import parse from 'parse'; // replace with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; интегрируйте parse на странице next js например, создайте страницу для получения и отображения элементов // pages/index js import { useeffect, usestate } from 'react'; import parse from ' /lib/parseconfig'; export default function home() { const \[items, setitems] = usestate(\[]); useeffect(() => { const loaditems = async () => { const items = parse object extend('items'); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error('error retrieving items ', error); } }; loaditems(); }, \[]); return ( \<div style={{ padding '2rem' }}> \<h1>item list\</h1> \<ul> {items map((item) => ( \<li key={item id}> \<strong>{item get('title')}\</strong> {item get('description')} \</li> ))} \</ul> \</div> ); } вариант b использование rest или graphql если вы предпочитаете не использовать parse sdk, вы можете управлять crud операциями с помощью rest или graphql например, чтобы получить элементы через rest const fetchitems = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('items fetched ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); интегрируйте эти api вызовы в ваши компоненты next js по мере необходимости шаг 5 – защита вашего бэкенда реализация списков контроля доступа (acl) защитите ваши данные, назначив acl объектам например, чтобы создать элемент, к которому может получить доступ только его владелец async function addprivateitem(itemdetails, owner) { const items = parse object extend('items'); const newitem = new items(); newitem set('title', itemdetails title); newitem set('description', itemdetails description); // configure acl owner only read and write const acl = new parse acl(owner); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); newitem setacl(acl); try { const saveditem = await newitem save(); console log('private item added ', saveditem); } catch (error) { console error('error adding item ', error); } } настройка разрешений на уровне класса (clp) в панели управления back4app настройте clp для каждой коллекции, чтобы ограничить доступ к данным только авторизованным пользователям шаг 6 – реализация аутентификации пользователей настройка учетных записей пользователей back4app использует встроенный класс пользователя parse для аутентификации в вашем приложении next js управляйте регистрацией и входом, как показано ниже // pages/signup js import { usestate } from 'react'; import parse from ' /lib/parseconfig'; export default function signup() { const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[email, setemail] = usestate(''); const registeruser = async (e) => { e preventdefault(); const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); alert('registration successful!'); } catch (error) { alert('registration failed ' + error message); } }; return ( \<form onsubmit={registeruser}> \<input type="text" placeholder="username" value={username} onchange={(e) => setusername(e target value)} /> \<input type="password" placeholder="password" value={password} onchange={(e) => setpassword(e target value)} /> \<input type="email" placeholder="email" value={email} onchange={(e) => setemail(e target value)} /> \<button type="submit">register\</button> \</form> ); } аналогичный подход можно использовать для управления входом и сессиями вы также можете включить дополнительные функции, такие как социальный вход, проверка электронной почты и восстановление пароля через панель управления back4app шаг 7 – развертывание вашего фронтенда на next js варианты развертывания back4app позволяют вам без труда разместить ваше приложение на next js, будь то через интеграцию с github или контейнеризацию docker 7 1 создание вашей производственной версии откройте директорию вашего проекта в терминале запустите команду сборки npm run build это генерирует next папку, содержащую оптимизированные статические и серверные файлы 7 2 организация и загрузка вашего кода ваш репозиторий должен содержать все исходные файлы для вашего приложения на next js типичная структура может быть следующей basic crud app nextjs/ ├── node modules/ ├── pages/ │ ├── index js │ └── signup js ├── lib/ │ └── parseconfig js ├── public/ │ └── favicon ico ├── package json └── readme md пример lib/parseconfig js // lib/parseconfig js import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; пример pages/index js (смотрите фрагмент кода, предоставленный в шаге 4) коммит вашего кода в github инициализируйте репозиторий git git init добавьте все файлы git add закоммитьте ваши изменения git commit m "initial commit of next js crud application" создайте репозиторий на github например, назовите его basic crud app nextjs запушьте ваш код git remote add origin https //github com/your username/basic crud app nextjs git git push u origin main 7 3 интеграция с веб развертыванием back4app доступ к веб развертыванию войдите в свою панель управления back4app, перейдите к вашему проекту и выберите функцию веб развертывания подключите свою учетную запись github следуйте инструкциям, чтобы связать ваш репозиторий выберите ваш репозиторий и ветку выберите репозиторий (например, basic crud app nextjs ) и ветку (например, main ) с вашим кодом 7 4 настройка параметров развертывания команда сборки если ваш репозиторий не включает предварительно собранную next папку, укажите команду (например, npm run build ) выходной каталог установите выходной каталог на next так, чтобы back4app знал, где находятся ваши скомпилированные файлы переменные окружения добавьте любые необходимые переменные окружения, такие как ключи api 7 5 контейнеризация вашего приложения next js с помощью docker если вы предпочитаете docker для развертывания, включите dockerfile в ваш репозиторий # use an official node runtime as the base image from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the source code copy \# build the next js application run npm run build \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/ next /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] выберите вариант развертывания docker в back4app, чтобы контейнеризировать и развернуть ваше приложение 7 6 запуск вашего приложения разверните ваше приложение нажмите кнопку развернуть в back4app мониторинг процесса сборки back4app получит ваш код, выполнит команду сборки и развернет ваше приложение доступ к вашему живому приложению после завершения развертывания будет предоставлен url, по которому размещено ваше приложение next js 7 7 проверка вашей развертки посетите предоставленный url откройте url в вашем браузере проверьте функциональность убедитесь, что ваши страницы загружаются правильно и что все операции crud работают устраните неполадки, если необходимо используйте инструменты разработчика браузера и логи back4app для диагностики любых проблем шаг 8 – заключение и следующие шаги поздравляем! вы успешно создали надежное crud приложение с помощью next js и back4app вы настроили свой проект, разработали индивидуальные коллекции и подключили свой фронтенд на next js к безопасному бэкенду следующие шаги улучшите свой фронтенд расширьте свое приложение на next js с помощью расширенных функций, таких как детализированные представления, функциональность поиска или обновления в реальном времени увеличьте возможности вашего бэкенда изучите облачные функции, интеграции с третьими сторонами или дополнительные средства управления доступом продолжайте учиться посетите документацию back4app https //www back4app com/docs и ресурсы next js для дальнейшей оптимизации и настройки следуя этому руководству, вы теперь обладаете навыками для создания масштабируемого и безопасного crud приложения с использованием next js и back4app удачного кодирования!