Вебинары Разобраться в IT Реферальная программа
Программирование Аналитика Дизайн Маркетинг Управление проектами
26 Авг 2023
2 мин
1647

Как создать сайт на Next.js

Узнайте, как создать сайт на популярном фреймворке Next.js с помощью нашего пошагового руководства для новичков в веб-разработке!

Next.js — это популярный фреймворк для создания сервер-рендеринга приложений на основе React. Он предоставляет множество функций, которые упрощают разработку веб-сайтов и приложений. В этой статье мы разберемся, как создать сайт на Next.js, шаг за шагом.

Установка и настройка

Для начала убедитесь, что у вас установлены Node.js и npm (последние версии). Затем выполните следующие шаги:

  1. Создайте новую папку для вашего проекта:
mkdir my-next-site
cd my-next-site
  1. Инициализируйте проект с помощью npm:
npm init -y
  1. Установите Next.js, React и ReactDOM:
npm install next react react-dom
  1. В файле package.json добавьте следующие скрипты:

«scripts»: {
«dev»: «next dev»,
«build»: «next build»,
«start»: «next start»
}

Теперь ваш проект готов к разработке с использованием Next.js.

Создание страниц

Next.js использует файловую систему для маршрутизации, так что создание новой страницы происходит путем добавления файла с расширением .js (или .jsx, .ts, .tsx) в папку pages.

  1. Создайте папку pages в корневой директории проекта:
mkdir pages
  1. Создайте файл index.js в папке pages:
touch pages/index.js
  1. Откройте файл index.js и добавьте следующий код:
import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Добро пожаловать на мой сайт на Next.js!</h1>
      <p>Здесь вы найдете информацию о том, как создать сайт на Next.js. 😊</p>
    </div>
  );
};

export default Home;

Теперь у вас есть главная страница вашего сайта.

Запуск проекта

Для запуска вашего сайта в режиме разработки выполните следующую команду:

npm run dev

Откройте браузер и перейдите по адресу http://localhost:3000 чтобы увидеть ваш сайт.

Дополнительные ресурсы

Next.js предлагает множество дополнительных возможностей, таких как оптимизация изображений, динамический импорт и API-маршруты. Чтобы узнать больше о работе с Next.js, рекомендуем посетить следующие ресурсы:

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

Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей

Добавить комментарий