Фреймворк, основанный на реакции, называется Next.js. Он предоставляет возможность создавать привлекательные веб-приложения для нескольких платформ, включая Windows, Linux и Mac. Если вы новичок в React и хотите узнать больше об экосистеме React, вы должны быть знакомы с фреймворком Next.js.
Давайте начнем с краткого обзора Next.js.

Основой Next.js являются React, Webpack и Babel. Это фантастический инструмент для разработки веб-приложений, хорошо известный своим рендерингом на стороне сервера. Zeit является создателем Next.js. Разработчики, уже знакомые с HTML, CSS, Java Script и React, могут быстро освоить next.js.

Основные качества:

  • Горячая перезагрузка кода: при сохранении изменений кода приложение автоматически перезагружается.
  • Автоматическое разделение кода: эта функция связывает и обслуживает каждую страницу с каждым импортом, найденным в коде. Это означает, что дополнительный код никогда не загружается на страницу.
  • Совместимость с экосистемами JavaScript, Node и React.
  • Перед передачей HTML клиенту можно просто отобразить компонент реакции на сервере.
  • Styled-JSX: Styled-JSX позволяет напрямую вставлять CSS в код JavaScript.

Пример:

function Home() {
return (
‹div className="container"›
‹p›Hello Geeks‹/p›
‹style jsx›{`< br /> .container {
margin: 50px;
}
p {
color: blue;
}
`}‹/style›
‹/div›
)

экспортировать главную страницу по умолчанию

Шаги по установке и запуску приложения Next.js:

  • Шаг 1. Для установки next.js требуются npm и node.js. Вы можете установить node.js отсюда. Подтвердите установку, выполнив эту команду на терминале.
node -v
npm -v
  • Шаг 2. Теперь создайте папку для своего проекта на рабочем столе, перейдите к папке через редактор кода и выполните следующую команду на терминале.
npm init -y
npm install --save next react react-dom
  • После этого шага у нас установлены все зависимости в нашей системе. Теперь добавьте следующий скрипт в файл package.json.

{
«скрипты»: {
«dev»: «далее»,
«build»: «следующая сборка»,
«start»: «следующий запуск»
}

  • Для запуска приложения в браузере используйте команду npm start в терминале.
  • Шаг 3. Добавьте файл index.js в папку страницы и добавьте в него следующий код.

импортировать React из 'реагировать';
импортировать ссылку из 'следующая/ссылка';

класс экспорта по умолчанию extends React.Component {
render() {
return ( {

// Это Jsx содержит HTML
// код в Javascript }
‹div›
‹h1›Hello Geeks‹/h1›
{
// Это Styled-jsx содержит
// CSS-код на Javascript}< br /> ‹style jsx›{`
a{
color:grey;
text-decoration:none;
}
`}‹/style›
}
‹/div›
)
}
}

Шаг 4. Теперь запустите приложение, запустив npm start.