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

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

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

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

1. Создайте новую папку для вашего проекта:

mkdir my-next-site
cd my-next-site

2. Инициализируйте проект с помощью npm:

npm init -y

3. Установите Next.js, React и ReactDOM:

npm install next react react-dom

4. В файле 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

2. Создайте файл index.js в папке pages:

touch pages/index.js

3. Откройте файл 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
• Примеры проектов на Next.js

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

Тест на профориентацию

За 10 минут узнайте, как ваш опыт пригодиться в IT индустрии

Подробнее