Установка Next.js
При использовании Next.js в вашем проекте больше не нужно загружать скрипты react и react-dom с unpkg.com. Вместо этого вы можете установить эти пакеты локально с помощью npm или предпочитаемого менеджера пакетов.
Примечание: Для работы с Next.js на вашем компьютере должна быть установлена Node.js версии 18.17.0 или выше (см. минимальные требования). Вы можете скачать её здесь.
Для этого создайте новый файл в той же директории, где находится ваш index.html, с именем package.json и пустым объектом {}.
{}В терминале выполните следующую команду в корне вашего проекта:
npm install react@latest react-dom@latest next@latestПосле завершения установки вы должны увидеть зависимости проекта в файле package.json:
{
"dependencies": {
"next": "^14.0.3",
"react": "^18.3.1",
"react-dom": "^18.3.1"
}
}Не беспокойтесь, если у вас более новые версии, чем указано выше — главное, чтобы пакеты next, react и react-dom были установлены.
Вы также заметите новый файл package-lock.json, содержащий точные версии установленных пакетов.
Вернувшись к файлу index.html, удалите следующий код:
- Теги
<html>и<body>. - Элемент
<div>сid="app". - Скрипты
reactиreact-dom, так как они теперь установлены через NPM. - Скрипт
Babel, потому что Next.js включает компилятор для преобразования JSX в валидный JavaScript. - Тег
<script type="text/jsx">. - Методы
document.getElementById()иReactDom.createRoot(). - Часть
React.в функцииReact.useState(0).
После удаления добавьте следующий импорт в начало файла:
import { useState } from 'react';Ваш код должен выглядеть так:
import { useState } from 'react';
function Header({ title }) {
return <h1>{title ? title : 'Default title'}</h1>;
}
function HomePage() {
const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
const [likes, setLikes] = useState(0);
function handleClick() {
setLikes(likes + 1);
}
return (
<div>
<Header title="Develop. Preview. Ship." />
<ul>
{names.map((name) => (
<li key={name}>{name}</li>
))}
</ul>
<button onClick={handleClick}>Like ({likes})</button>
</div>
);
}Поскольку в файле остался только JSX, вы можете изменить его расширение с .html на .js или .jsx.
Создание первой страницы
Next.js использует файловую маршрутизацию. Это значит, что вместо определения маршрутов в коде вы можете использовать папки и файлы.
Вот как создать первую страницу в Next.js:
- Создайте папку app и переместите в неё файл
index.js. - Переименуйте
index.jsвpage.js— это будет главная страница приложения. - Добавьте
export defaultк компоненту<HomePage>, чтобы Next.js понимал, какой компонент рендерить как основной.
import { useState } from 'react';
function Header({ title }) {
return <h1>{title ? title : 'Default title'}</h1>;
}
export default function HomePage() {
// ...
}Запуск сервера разработки
Теперь запустим сервер разработки, чтобы видеть изменения в реальном времени. Добавьте скрипт "next dev" в package.json:
{
"scripts": {
"dev": "next dev"
},
"dependencies": {
"next": "^14.0.3",
"react": "^18.3.1",
"react-dom": "^18.3.1"
}
}Запустите npm run dev в терминале. Вы заметите две вещи:
- При переходе на localhost:3000 появится ошибка:
Это происходит потому, что Next.js использует React Server Components — новую функцию, позволяющую рендерить React на сервере. Серверные компоненты не поддерживают useState, поэтому нужно использовать клиентский компонент.
В следующей главе мы обсудим различия между серверными и клиентскими компонентами и исправим эту ошибку.
- В папке
appавтоматически создался файлlayout.js— основной макет приложения. Здесь можно разместить UI-элементы, общие для всех страниц (например, навигацию, подвал и т.д.).
export const metadata = {
title: 'Next.js',
description: 'Generated by Next.js',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}Итоги
Уже на этом этапе можно оценить преимущества Next.js:
- Убраны скрипты React и Babel — вам больше не нужно думать о сложной настройке инструментов.
- Создана первая страница.
Дополнительные материалы: