Руководство по Next.js с примерами: создавайте лучшие приложения на React с помощью Next

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

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

Вот что мы рассмотрим сегодня:

  • Что такое Next.js?
  • Пример Next.js
  • Начало работы с Next.js
  • Проекты для создания с помощью Next.js

Оптимизируйте свои веб-страницы с помощью Next.js

Изучите Next.js на практических примерах и одновременно создайте страницу поиска Giphy для создания резюме.

Next.js — лучший способ создать React приложения

Что такое Next.js?

Next.js — это интерфейсный фреймворк React с открытым исходным кодом, который добавляет дополнительную оптимизацию такие возможности, как рендеринг на стороне сервера (SSR) и создание статических сайтов . Next.js основан на библиотеке React, то есть приложения Next.js используют преимущества React и просто добавляют дополнительные функции.

Рендеринг на стороне сервера. SSR позволяет сервер для доступа ко всем необходимым данным и совместной обработки JavaScript для рендеринга страницы. Затем страница полностью отправляется обратно в браузер и немедленно отображается. SSR позволяет веб-страницам загружаться за небольшую часть времени и повышает удобство работы пользователей с дополнительной отзывчивостью.

Поисковая оптимизация (SEO). Использование SSR также дает вам преимущество в SEO, которое помогает вашему сайту занимать более высокие позиции на страницах результатов поисковых систем. SSR повышает рейтинг веб-сайтов с точки зрения SEO, поскольку они загружаются быстрее, а с помощью трекеров SEO можно сканировать больше контента.

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

В целом Next.js считается более полнофункциональная версия React, которая поддерживает известную интуитивность React Framework.

Зачем использовать Next.js?

Основным преимуществом Next.js является встроенная поддержка SSR для повышения производительности и SEO.. Рендеринг на стороне сервера работает путем изменения потока запросов приложения React таким образом, что все компоненты, кроме клиента, отправляют свою информацию на сервер.

Со всей информацией на сервер, он может предварительно отобразить HTML-код страницы. Клиент может отправить один запрос на сервер и получить полную HTML-страницу вместо того, чтобы запрашивать каждый компонент по отдельности с помощью рендеринга на стороне клиента .

Плюсы:

  • Приложения Next.js загружаются значительно быстрее, чем приложения React, благодаря встроенному рендерингу на стороне сервера.
  • Поддерживает функции экспорта статических сайтов.
  • Быстро изучить для всех, у кого есть предыдущий опыт работы с React.
  • Автоматическое разделение кода для страниц.
  • Легко создавать внутренние API-интерфейсы с помощью встроенных маршрутов API и создавать конечные точки API.
  • Встроенная поддержка маршрутизации страниц, CSS, JSX и TypeScript.
  • Быстрое добавление плагинов для настройки Next.js в соответствии с потребностями вашей конкретной страницы s.
  • Сохраняет такие преимущества React, как интуитивно понятное создание на основе компонентов, интерфейсная система состояний и высокая популярность.

Con :

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

Однако настройки Next.js хорошо вписываются в рамки большинства проектов.

Интересный факт : Образовательный недавно перешел на Next.js поверх React. Если вы использовали Educative в последние несколько месяцев, вы уже пользовались некоторыми преимуществами Next.js!

Когда использовать Next.js

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

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

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

Пример Next.js

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

Файл index.js , представляющий отдельную страницу в этом проекте, выглядит следующим образом:

 импортировать голову из 'next/head' импортировать стили из '.  ./styles/Home.module.css'export функция по умолчанию Home () {return ()} 

Индекс файл является ядром этого приложения, поскольку он содержит только эту единственную страницу. Реальные веб-сайты будут содержать несколько страниц в папке pages , каждая из которых представляет отдельную веб-страницу.

Продолжайте изучать Next.js.

Next.js — это будущее разработки React . Начните создавать веб-страницы, которые работают на ваших пользователей, а не против них.

Практические курсы Educative позволят вам изучить передовые технологии вдвое быстрее, без сложной настройки. К концу у вас будет готовый проект поиска Giphy и сертификация Next.js, чтобы выделиться среди рекрутеров или текущих работодателей.

Next.js — лучший способ построить Приложения React

Начало работы с Next.js

Теперь давайте начнем с практического кода Next.js. Мы рассмотрим 5 основных концепций, видимых в приложении по умолчанию, которые вам понадобятся для создания собственного проекта Next.js.

Требования и среда

Прежде чем мы начнем, давайте настроим все, что вам нужно. Перед загрузкой Next.js вам потребуются Node.js, npm и npx .

Вы можете установить Node .js на их официальном сайте. Чтобы убедиться, что он правильно загружен, введите node -v в командную строку. Обычно npm и npx входят в состав вашей установки Node.js.

Для подтверждения чтобы они были установлены правильно, введите в командной строке npm -v и npx -v . Каждый вернет свою версию соответственно.

Если все три из этих инструментов установлены правильно, вы можете установить Next.js с помощью Node.Enter npm install next response response -dom в командную строку.

После успешной установки вы получите следующее сообщение с вашими текущими версиями Next и React:

  + response@16.13.1+ react-dom@16.13.1+ next@9.4.4 добавил 831 пакет от 323 участников и проверил 834 пакета за 172.989 секунд  

Создать приложение Next.js

Вы можете создать новое приложение Next.js с помощью команды create-next-app или вручную. С помощью create-next-app проще, поскольку все, что вам нужно сделать, это ввести npm create-next-app в командную строку.

В качестве альтернативы вы можете открыть файл package.json и ввести следующие сценарии:

  "scripts": {  "dev": "следующий разработчик", "start": "следующий запуск", "build": "следующий  build "}  

Это позволяет запускать новое приложение в разных режимах:

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

Если вы запустите это приложение с помощью next dev , вы увидите страницу Next.js по умолчанию на http://localhost: 3000 .

Структура папок Next.js

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

Каждый проект Next.js начинается с трех папок: pages , общедоступные и стили .

Вот пример того, что вы найдете в новом проекте Next.js:

 //другие файлы и папки, .gitignore, package.json, next.config.js ...- страницы - api - hello.js - _app.js - index.js- public - favicon  .ico - vercel.svg- styles - globals.css - Home.module.css  

Pages

Папка страниц содержит файлы ваших страниц. Каждый файл страницы является компонентом React с уникальным маршрутом, автоматически созданным из имени файла. Например, страница Next.js hello.js будет находиться в pages/hello.js .

Некоторые страницы , как и в _app.js выше, добавьте в свое имя префикс подчеркивания, чтобы пометить их как пользовательские компоненты. Эти компоненты используются Next.js для работы с другими компонентами.

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

Public

Эта папка предназначена для обслуживания статических файлов, то есть эти файлы не изменяются и на него можно только ссылаться. Эта папка часто содержит изображения или значки, которые использует сайт, а также внутреннюю информацию, такую ​​как проверки сайта Google.

В нашей общедоступной папке у нас есть favicon.ico , который представляет собой небольшой значок для использования на вкладках браузера, и vercel.svg , который отображает значок компании платформы.

Vercel и Netlify — самые популярные хостинговые и бессерверные сервисы для Next.js

Стили

Эта папка содержит наши таблицы стилей CSS, которые определяют внешний вид всех наших элементов страницы. Файл globals.css устанавливает общий стандарт, который будут использовать все страницы в проекте.

Вы также можете добавить стиль для конкретного компонента, используя файлы модулей с именами суффикс module , .module.css.

Маршрутизация/навигация в вашем приложении

Навигация относится к способам, которыми ваши пользователи могут перемещаться по вашему Сайт Next.js. Маршруты и ссылки — это два основных метода, которые вы можете использовать для определения навигации по сайту.

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

Index

Индексные файлы, такие как index.js , направляются в начальную точку вашего приложения /, а не в /index . Вы можете использовать это в своих интересах, создав несколько файлов index , которые выступают в качестве целевой страницы или начальной точки для различных путей навигации на вашем сайте.

  - pages - index.js # найдено в `/` - users - index.js # найдено в `/users` - account.js #`/users/account`  

Например, страница index.js под страницами — это домашняя страница сайта, на которую можно попасть, если не введен дополнительный маршрут. Второй index.js в users — это целевая страница для пути users , на который можно попасть, введя /users .

Вложенный

Вложенные маршруты — это маршруты, которые доступен только через общий родительский маршрут, например /users/account . Вы можете думать о вложенных маршрутах как о вложенных файлах на вашем компьютере, поскольку вам нужно перемещаться по всем компонентам более высокого уровня, чтобы добраться до вложенного компонента.

Динамические маршруты

Мы также можем включать параметры в наши маршруты, чтобы разрешить переменное поведение. Динамические страницы обозначаются квадратными скобками. Эта функция, по сути, позволяет нам передавать информацию на страницу, как если бы мы выполняли функцию.

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

  # ... - users - index.js - [account.js] # `/users/[accountName]`  

При такой настройке пользователи могут ввести имя своей учетной записи в URL-адрес и сразу перейти на страницу с информацией об учетной записи, а не начинать с users . Другими словами, я мог ввести имя своей учетной записи /users/education , чтобы перейти на динамическую страницу, которая заполняется информацией, относящейся к введенному имени учетной записи.

Файл account.js должен будет включать условные операторы, которые сообщают ему, что делать в зависимости от переданного параметра.

  if  (id == 'one') {return postOne;  } иначе, если (id == 'два') {return postTwo;  } 

Вы также можете ввести ссылки перехода по клику на стороне клиента, чтобы позволяют пользователям перемещаться по сайту без адресной строки. Компонент Link React является ключом к связыванию в Next.js.

Компонент Link принимает аргумент href , заполненный маршрутом файла целевого компонента. Это создаст ссылку между текущей страницей и страницей, найденной на введенном маршруте.. Например, если вы добавите в hello.js , вы создадите ссылку из hello.js на целевую страницу users .

 import Link from 'next/link'import Head from' next/head 'function HomePage (props) {return (    Добро пожаловать в Next.js!   
Добро пожаловать в Next.js!
> Пользователи Ссылка>
EducativeLogo >)} экспорт асинхронной функции getServerSideProps (context) {const res = await fetch ('https://api.github .com/repos/vercel/next.js ') const json = await res.json () return {props: {stars: json.stargazers_count}}} экспортировать домашнюю страницу по умолчанию

Получение данных Next.js

Получение данных — это когда Next.js запрашивает данные с сервера для создания страницы. Выбор правильных методов предварительного рендеринга и функций выборки важен для создания удобных приложений

Страница может быть сгенерирована либо с помощью SSR, при котором сервер отображает всю страницу при получении запроса, либо статическая генерация, которая кэширует предыдущую визуализацию страницы, чтобы ее можно было доставить немедленно.

  • SSR : лучше для интерактивных или быстро меняющихся страницы, которые не работают со статической генерацией.
  • SG : лучше для текстовых страниц или страниц, которые не меняются, потому что статическая визуализация всегда будет соответствовать потребности пользователя.

Вы можете использовать тот или иной метод выборки или реализовать гибридную систему. Next.js имеет 3 функции асинхронной выборки данных, которые действуют как централизованная выборка альтернативы традиционному методу React. Эти функции:

  • getStaticProps : используются с SG для извлечения содержимого страницы из внешних данных.
  • getStaticPaths : используется с SG для извлечения путей страниц из внешних данных.
  • getServerSideProps — используется с SSR для извлечения предварительно обработанных страниц. во время сборки.
  • getStaticProps
  • getStaticProps
  • getStaticProps
  • getStaticPaths
  • getStaticPaths
  • getServerSideProps
  • getServerSideProps
 export async function getStaticProps () {//Это настоящая конечная точка const res  = ожидание получения ('https://sampleapis.com/fakebank/api/Accounts');  const account = ждать res.json ();  return {props: {accounts: accounts.slice (0, 10),},};} 

Проекты для сборки с Next.js

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

  • Чтобы попрактиковаться в работе с внешними данными: приложение для поиска Giphy, которое извлекает результаты из внешней базы данных

  • Для практики статической генерации: национальный информационный сайт, на котором отображается флаг, население и географические размер каждой страны

  • Для практики навигации: похожая на Instagram веб-страница социальной сети, на которой отображаются изображения пользователя на странице учетной записи. и лайки/комментарии к каждому отдельному изображению

Чтобы помочь вам получить максимальную отдачу от вашего проекта, Educative создал Next.js — идеальный способ создания приложений React . Этот курс познакомит вас с основами Next.js при создании каждого компонента поискового проекта Giphy. К концу курса у вас будет полностью оптимизированная и развернутая страница поиска Giphy, которую вы сможете разместить в своем резюме или в LinkedIn.

Удачного обучения!

Продолжить чтение о React

  • Эволюция React: V16 и последующие версии
  • Five лучшие практики для разработчиков React
  • Понимание Redux: руководство для новичков по современному управлению состоянием
Оцените статью
nanomode.ru
Добавить комментарий