Вот пошаговая инструкция, как запустить ваше Next.js приложение на локальном хосте по адресу http://localhost:3000:
Создайте папку для проекта и перейдите в неё
mkdir rubydub
cd rubydubИнициализируйте новый Next.js проект
npx create-next-app@latest .При запросе конфигурации выберите:
Установите дополнительные зависимости
npm install react-intersection-observer chart.jsСкопируйте все файлы из проекта в соответствующие папки
Запустите сервер разработки
npm run devОткройте браузер и перейдите по адресу
http://localhost:3000Если возникают ошибки с зависимостями, попробуйте выполнить:
npm installТеперь ваше приложение должно быть доступно по адресу http://localhost:3000.
Вам нужно заменить все существующие файлы и добавить новые. Это важно, потому что:
app/page.tsx, app/layout.tsx, globals.css), содержат шаблонный код, который нужно заменить вашим кодом.tailwind.config.ts, next.config.mjs) нужно заменить, чтобы они содержали правильные настройки для вашего проекта.Вот что нужно сделать:
components, public/images и т.д.Нет, вам не нужно отдельно устанавливать Turbopack. Причины:
npm run dev, которая запустит стандартный сервер разработки Next.js.Если вы хотите использовать Turbopack для ускорения разработки, вы можете запустить сервер с флагом --turbo:
npm run dev -- --turboНо это необязательно и может вызвать проблемы совместимости с некоторыми функциями, так как Turbopack все еще находится в бета-версии.
Для вашего проекта рекомендую использовать стандартный сервер разработки без Turbopack, чтобы избежать возможных проблем совместимости.
Build Error
Module not found: Can't resolve 'react-intersection-observer'
./components/contact-form.tsx (6:1)
Module not found: Can't resolve 'react-intersection-observer'
4 |
5 | import { useState, type FormEvent } from "react"
6 | import { useInView } from "react-intersection-observer"
| ^
7 |
8 | export default function ContactForm() {
9 | const [formData, setFormData] = useState({
https://nextjs.org/docs/messages/module-not-found