Автор оригинала: FreeCodeCamp Community Member.
С некоторыми основными знаниями реагирования и JavaScript вы будете на вашем пути
Next.js создана ли JavaScript Framework, созданная Zeit Отказ Он позволяет создавать серверные рендеринга и статические веб-приложения с использованием реакции. Это отличный инструмент для создания следующего сайта. Он имеет много отличных функций и преимуществ, которые могут сделать Nextjs ваш первый вариант для создания следующего веб-приложения.
Вам не нужна какая-либо конфигурация WebPack или похоже на начать использовать Next.js. Это поставляется со своей конфигурацией. Все, что вам нужно, это запустить NPM запустить dev И начните строить ваше приложение?
В этой статье мы собираемся исследовать великие функции и трюки Next.js и как начать строить следующий сайт с ним.
Этот пост предполагает, что у вас есть несколько базовых знаний о реагировании и JavaScript.
Вот несколько отличных сайтов, построенных с помощью Next.js:
Я даже использовал Nextjs, чтобы построить свой личный веб-сайт Soedhayani.me – Вы можете получить исходный код на GitHub здесь Отказ
Начинаться с next.js
Чтобы начать с next.js, вам нужно установить Node.js на вашем компьютере, и все это. Next.js похож на любое другое приложение Node.js – вам нужна NPM или пряжа для установки зависимостей.
Давайте начнем и создать проект Next.js.
Во-первых, нам нужно создать папку и дать ей название нашего выбора. Я назову это NextJS-App Отказ
Вы можете легко сделать это с этой командной строкой:
mkdir nextjs-app
После создания папки NextJS-App открыть его на терминал. Беги NPM init создать Package.json файл.
Далее мы должны установить наши зависимости.
Установка Next.js.
- Использование пряжи, введите
yarn add next
- Использование NPM, введите:
npm i next --save
Тогда мы должны установить реагирование, потому что Next.js использует реагирование. Первая строка ниже использует пряжу для установки.
yarn add react react-dom
// with npm
npm i react react-dom --save
После этого вам нужно создать две необходимые папки: Страницы и Статический Отказ Next.js не будет работать без них !!
mkdir pages static
Вы Должен Имейте эту структуру после выполнения этих команд:
nextjs-app -pages -static -package.json
А потом просто вы можете запустить NPM следующий Dev а потом открыть http://localhost: 3000/ в вашем браузере.
Незначительно Страница покажет, потому что у нас еще нет никакой страницы!
Так что давайте создадим Главная Страница и точка входа index.js Отказ
touch index.js home.js
И тогда вы можете написать обычный реактивный компонент. Как я уже сказал выше, Next.js предназначен для строительства приложений по реагированию.
Вот что наше home.js выглядит как:
А вот наш index.js файл:
Next.js имеет живую функцию перезагрузки. Все, что вам нужно сделать, это просто изменить и сохранить, а next.js будет компилировать и автоматически перезагрузить приложение для вас.
Примечание : Next.js понравится любой другой инструмент для рендеринга на стороне сервера, нам нужно определить страницу нашего приложения по умолчанию, в нашем случае index.js Отказ
Вы увидите это изменение в браузере после запуска NPM следующий Dev :
Поздравляю! Мы только что создали приложение Next.js с несколькими простыми шагами. Эти инструкции по созданию приложения Next.js описаны в Официальные документы Next.js Отказ
Моя альтернатива
Я обычно не использую этот путь. Я использую create-next-app CLI вместо этого, что сделает все это для меня в одной линии.
npx create-next-app my-app
Вы можете проверить документацию здесь изучить больше функций.
Создайте пользовательские конфиги для next.js
Иногда вы можете добавить некоторые дополнительные зависимости или пакеты на ваше приложение Next.js.
Next.js дает вам возможность настроить вашу конфигурацию с помощью Next-config.js файл.
Например, вы можете добавить поддержку SASS в ваше приложение. В этом случае вы должны использовать Next-Sass Пакет и Вы должны добавить его в Next-config.js Файл как в примере ниже:
Сначала установите Next-Sass :
yarn add @zeit/next-sass
Затем включите его внутри Next-config.js файл:
И тогда вы можете создать свой код SASS и импортировать его в свой компонент:
Импорт файла SASS в нашем компоненте:
И вот результат:
Вау, не так ли Супер легкий Чтобы добавить поддержку SASS на OUT NEXT.JS?
На данный момент мы просто охватывали часть установки и конфигурации. Теперь давайте поговорим о функциях Next.js!
Особенности
Next.js поставляется с кучей отличных функций, таких как серверный рендеринг, маршрутизаторы и ленивая загрузка.
Серверный рендеринг
Next.js выполняет рендеринг на стороне сервера по умолчанию. Это делает ваше приложение оптимизировано для поисковых систем. Кроме того, вы можете интегрировать любые промежуточные программы, такие как Express.js или Hapi.js И вы можете запустить любую базу данных, такую как MongoDB или MySQL.
Говоря о оптимизации поисковой системы, Next.js поставляется с Голова Компонент, который позволяет добавлять и сделать динамические мета-теги. Это моя любимая особенность – вы можете сделать пользовательские и динамичные мета-теги. Они сделают ваш сайт возможность проиндексироваться поисковыми системами, такими как Google. Вот пример Голова составная часть:
И вы можете импортировать и использовать Голова Компонент на любой другой странице:
Потрясающие!
Примечание : С помощью next.js ты Не Нужно импортировать реагирование, потому что next.js делает это для вас.
Создание статического сайта с помощью Next.js
Как и рендеринг на стороне сервера, вы все равно можете компилировать и экспортировать свое приложение в качестве HTML статического веб-сайта и развернуть его на статическом хостинге веб-сайта, как страница GitHub или NetLify Отказ Вы можете узнать больше, как сделать статический сайт с помощью Next.js здесь, в официальных документах Отказ
Маршрутизаторы
Это еще одна из великих особенностей Next.js. Когда вы используете Create-React-App , вам обычно нужно установить Реагистрационный маршрутизатор и создать свою пользовательскую конфигурацию.
Next.js поставляется со своими собственными маршрутизаторами с нулевыми конфигами. Вам не нужна дополнительная конфигурация ваших маршрутизаторов. Просто создайте свою страницу внутри Страницы Папка и Next.js позаботятся обо всех конфигурации маршрутизации.
Давайте пойдем вперед и создадим пользовательскую навигацию, чтобы сделать все понятно!
Навигация между страницами, Next.js имеет Ссылка Способ управления навигацией.
Давайте создадим blog.js и Contact.js Страницы:
Blog.js.
А вот Contact.js страница:
И теперь мы должны быть в состоянии перемещаться между этими страницами?
Вау, что так просто и супер потрясающе.
Ленивая загрузка
Ленивая загрузка заставляет вашу заявку доставлять лучший пользовательский опыт. Иногда страница может занять время на загрузку. Пользователь может отказаться от вашего приложения, если загрузка занимает более 30 секунд.
Способ избежать этого, чтобы использовать какой-то трюк, чтобы указать пользователю, что страница загружается, например, отображение спина. Ленивая загрузка или разделение кода – одна из функций, которые позволяют вам иметь дело, и контролировать, медленно загружать, поэтому вы загружаете только необходимый код на вашей странице.
Next.js поставляется с собственным методом разделения кода. Это дает нам метод, называемый динамический , чтобы загрузить наш компонент, как в примере ниже:
Вы можете найти исходный код этих примеров на Гадость
Это все. Я надеюсь, что этого достаточно, и я надеюсь, что эта статья дает вам четкую идею о Next.js и его функциях. Вы можете узнать больше о других функциях в Официальные документы Отказ
Если у вас есть какие-либо другие дополнения к этому посту, вы можете оставить комментарий ниже, и если вам нравится этот пост, пожалуйста, нажмите Clap? и поделиться.
Обсудить на Twitter Вспомогательный