Почему я выбрал Next.js с инструментами на базе ИИ вместо WordPress для перестройки моего сайта

Я хотел переделать свой сайт за один уик-энд и рассматривал три возможных инструмента: Drupal, WordPress и Next.js. Поскольку мой существующий сайт был построен на WordPress, это казалось лучшим выбором. С WordPress мне не пришлось бы переносить контент, мой сервер уже был настроен, и все, что мне нужно было сделать, это применить новую тему.

Однако я выбрал Next.js с инструментами на базе ИИ для переделки моего сайта. Вот почему.

Процесс редизайна

Редизайн сайта — это больше, чем просто запуск новой версии. Процесс зависит от сложности проекта и его целей. Некоторые редизайны представляют собой простые обновления, в то время как другие требуют полной перестройки сайта, включая его макет, дизайн и функции.

Ключевые части редизайна могут включать:

• Создание нового дизайна или улучшение существующего
• Изменение макета контента, чтобы его было легче читать и использовать
• Улучшение SEO путем ускорения работы сайта и облегчения его поиска в поисковых системах
• Добавление новых функций на основе потребностей пользователей
• Настройка перенаправлений, чтобы старые URL-адреса продолжали работать и не влияли на поисковые рейтинги
• Повышение доступности и скорости сайта для лучшего пользовательского опыта
• Перенос контента или реструктуризация данных при смене платформы

Мой проект редизайна должен был охватить все эти аспекты.

Проблемы с дизайном

Я знал, что мне не хватает дизайнерских навыков. Что еще более важно, мне не нравится процесс дизайна. Я искал темы WordPress, которые соответствовали моему видению, но не смог найти ни одной. Это означало, что мне пришлось бы создавать пользовательскую тему или шаблоны конструктора страниц, если бы я остался с WordPress. Та же проблема возникла и с Drupal, потому что ничего не подходило моим потребностям.

Поскольку я не дизайнер, у меня было два варианта:

• Использовать существующую тему
• Получить помощь

Я решил использовать инструменты на базе ИИ, чтобы воплотить свои идеи в жизнь. Всего несколькими описательными запросами ИИ создал все необходимые мне UI-компоненты: от навигационных меню до макетов контента и адаптивных дизайнов.

С точки зрения бэкенда (административной области), Drupal и WordPress пока не полностью поддерживают инструменты на базе ИИ для генерации пользовательских макетов, или они работают неоптимально. Доступные варианты по-прежнему требуют входа на сайт и многократного выполнения нескольких шагов. Однако сообщество Drupal добивается значительного прогресса в этой области, и я планирую скоро написать об этом.

Почему я выбрал Next.js

Я исключил WordPress и Drupal, потому что они требовали слишком много ручной работы. Несмотря на мой опыт работы с Drupal, настройка сайта с модулями и темами заняла бы больше времени, чем у меня было. Имея всего один уик-энд для завершения проекта, мне нужно было простое решение без ненужной сложности.

Вместо этого я обратился к Next.js с современными инструментами разработки. Cursor и Windsurf, оба IDE, упрощают дизайн пользовательского интерфейса, генерируя структурированный, готовый к продакшену код из простых запросов. Вы можете описать то, что хотите, на обычном английском языке, например: «создать адаптивное навигационное меню с логотипом и ссылками», и мгновенно получить развертываемый код. Я использую эти инструменты для личных проектов и работы уже довольно давно.

Одним из ключей к эффективной разработке на базе ИИ является создание хороших запросов. Для процесса миграции я предоставил URL-адреса моих существующих страниц WordPress и описал желаемую структуру контента Next.js. С помощью этих подробных запросов Cursor сгенерировал скрипты для сбора контента с моего старого сайта и его преобразования в новый формат. Тот же подход помог создать оптимизированные URL-адреса и правила перенаправления для поддержания SEO-рейтингов, обеспечивая при этом правильные метаданные и семантическую HTML-структуру на всем сайте.

Традиционно вы бы писали каждую строку кода вручную. Эти IDE генерируют целые компоненты и страницы с помощью простых запросов, следуя лучшим практикам и поддерживая качество кода. Сгенерированный код может быть немедленно развернут на вашем сервере.

Для оптимизации процесса я использовал:

• ChatGPT, Gemini и Claude для мозгового штурма и создания эффективных запросов
• Cursor и Windsurf для генерации кода и структуры
• Tailwind CSS для быстрой стилизации и адаптивного дизайна

Tailwind обеспечил быструю стилизацию с согласованными, оптимизированными результатами.

В качестве бонуса хостинг на бесплатном уровне Vercel экономит мне 5 долларов в месяц на расходах на хостинг и избавляет от часов, затрачиваемых на обновления WordPress и обслуживание сервера каждый месяц.

Сила ИИ

ИИ позволяет нам достигать того, чего раньше мы не могли, будь то из-за отсутствия опыта или отсутствия интереса.

Еще одним важным фактором моего решения была скорость.

Мой старый сайт на WordPress получил только 65 баллов по PageSpeed Insights для мобильных устройств, как показал последний тест производительности:

В отличие от этого:

• Next.js невероятно быстр, набирая 100 баллов по PageSpeed как для мобильных, так и для настольных устройств
• Достижение этого заняло всего несколько хорошо составленных запросов и всего несколько минут

Принятие ИИ при сохранении контроля

ИИ революционизирует разработку программного обеспечения, значительно повышая производительность. Он позволяет разработчикам выполнять задачи, которые ранее требовали целых команд или казались недостижимыми из-за временных ограничений, отсутствия опыта или ограниченного интереса к определенным аспектам разработки.

Однако важно понимать, что ИИ — это мощный помощник, а не замена фундаментальным знаниям и критическому мышлению. Вот несколько ключевых выводов, которые я сделал:

• Изучение основ важнее, чем когда-либо. Вам нужно понимать, что делает ИИ и почему
• Позиционируйте себя как водителя, а ИИ — как вашего помощника, выполняющего повторяющиеся и рутинные задачи
• Сосредоточьте свою энергию на сложных аспектах: понимание потребностей пользователей, проектирование систем, архитектурные решения и решение проблем
• Сильные коммуникативные навыки, такие как активное слушание, стали еще более важными в эпоху ИИ

Ключ в том, чтобы принять ИИ, сохраняя при этом контроль над процессом разработки. Это означает тщательный просмотр сгенерированного кода, понимание его последствий и обеспечение его соответствия требованиям вашего проекта и лучшим практикам.

В моем случае ИИ позволил мне воплотить мои идеи в реальность с помощью нескольких хорошо составленных запросов. Это помогло мне быстро итерировать, экспериментировать и совершенствовать, пока я не получил результат, который мне понравился, и все это при значительно меньших временных затратах.

Хотя я люблю Drupal и WordPress, и это отличные инструменты для многих случаев использования, которые я буду продолжать использовать там, где они имеют смысл, разработка на базе ИИ с Next.js оказалась идеальным решением для этого конкретного проекта.

Технологический стек

Вот полный стек, который я использовал для создания этого веб-сайта: