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

Зачем нам Next.js, если есть React.js? Не совсем корректно сравнивать Next.js и Create-React-App, потому что NextJS — нечто большее. В то время как CRA — инструмент для cкаффолдинга React-приложений, NextJS — это фреймворк для их создания. Прямо из коробки NextJS предоставляет рендеринг на стороне сервера, создание статических сайтов, serverless-функции и многое другое. Это целый набор инструментов, который дает нам всё необходимое для создания эффективных веб-приложений.

Для меня выбор между простым React.js и Next.js очевиден. Если пишу приложение, которое нужно вставить на обычный сайт, то делаю это на Reacte. Часто речь идет о сайтах на WordPress, где на сервере есть только PHP и никакое приложение Node.js не запустится.

Если же нужен полноценный сайт и есть возможность серверной части на js, то конечно выбираю NEXT.js, потому как это тот же React, но с серверными плюшками и с возможностью SEO.

Перед установкой проверьте, что node.js у вас установлена и версия обновлена. У меня $ node -v => v20.17.0

Итак, установку как всегда начинаю с создания git репозитория:

Открываем проект а VS code(установка)

И собственно даем команду на установку Next.js

$ npx create-next-app name-next

Далее соглашаемся с использованием TypeScript

От использования ESLint я отказался.

Tailwind CSS решил установить, думаю полезно изучить.

Конечно согласился приложение писать в директории src, как привык в React.js

Автоматически папки в App считать страницами , конечно да.

App Router

Ура, у нас всё получилось!

Смотрим какие же команды мы можем использовать для запуска и сборки

$ npm run dev

Получаем уведомление, что сервер запущен на привычном 3000 порту

И ВУАЛЯ Наш сайт запущен!

В следующем посте расскажу про структуру каталогов в NEXT.js

Подписывайтесь, чтобы ничего не пропустить!