Nextjs для всіх - з деякими базовими знаннями React

Маючи деякі базові знання React та JavaScript, ви будете в дорозі

Next.js - це фреймворк JavaScript, створений Zeit. Це дозволяє створювати візуалізацію на стороні сервера та статичні веб-додатки за допомогою React. Це чудовий інструмент для створення вашого наступного веб-сайту. Він має безліч чудових функцій та переваг, що може зробити Nextjs вашим першим варіантом для створення вашої наступної веб-програми.

Вам не потрібна будь-яка конфігурація веб-пакету або подібного, щоб почати використовувати Next.js. Він поставляється зі своєю конфігурацією. Все, що вам потрібно, це запустити npm run devі почати створювати свою програму?.

У цій статті ми збираємось вивчити чудові можливості та прийоми Next.js, а також як розпочати створення наступного веб-сайту за допомогою нього.

Ця публікація передбачає, що ви володієте деякими базовими знаннями React та JavaScript.

Ось декілька чудових веб-сайтів, створених за допомогою Next.js:

  • Синтакст.fm
  • npmjs
  • material-ui.io
  • expo.io
  • codemenitor.io

Я навіть використовував Nextjs для створення мого особистого веб-сайту saidhayani.me - ви можете отримати вихідний код на GitHub тут.

Початок роботи з Next.js

Для початку з Next.js у вас на комп'ютері має бути встановлений node.js, і все. Next.js подібно до будь-якої іншої програми node.js - вам потрібні npm або Yarn для встановлення залежностей.

Давайте почнемо і створимо проект Next.js.

По-перше, нам потрібно створити папку і дати їй назву на наш вибір. Я називаю це nextjs-app.

Ви можете легко зробити це за допомогою цього командного рядка:

mkdir nextjs-app

Після створення папки nextjs-app відкрийте її на терміналі. Запустіть, npm init щоб створити package.json файл.

Далі ми повинні встановити наші залежності.

Встановлення Next.js

  • використовуючи пряжу, тип
yarn add next
  • використовуючи npm, введіть:
npm i next --save

Тоді ми повинні встановити React, оскільки Next.js використовує React. У першому рядку нижче використовується пряжа для встановлення.

yarn add react react-dom
// with npm
npm i react react-dom --save

Після цього вам потрібно створити дві необхідні папки: pagesі static. Next.js не працюватиме без них !!

mkdir pages static

Ви повинні мати цю структуру після запуску цих команд:

nextjs-app -pages -static -package.json

А потім просто можна запустити, npm next devа потім відкрити //localhost:3000/ у своєму браузері.

NotFoundСторінка буде відображатися , тому що у нас немає якоїсь - або сторінки ще!

Тож давайте створимо homeсторінку та точку входу index.js.

touch index.js home.js

І тоді ви можете написати звичайний компонент React. Як я вже говорив вище, Next.js призначений для побудови програм React.

Ось як home.jsвиглядає наш :

І ось наш index.jsфайл:

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

Примітка : Next.js подібно до будь-якого іншого інструменту візуалізації на стороні сервера, який нам потрібен для визначення сторінки за замовчуванням нашого додатку, у нашому випадку це index.js.

Ви побачите цю зміну в браузері після запуску npm next dev:

Вітаємо! Ми щойно створили програму Next.js із кількома простими кроками. Ці інструкції щодо створення програми Next.js описані в офіційних документах Next.js.

Моя альтернатива

Зазвичай я не використовую цей спосіб. Натомість я використовую CLI create-next-app, який зробить все це за мене в одному рядку.

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 до програми Next.js?

На даний момент ми просто розглянули частину встановлення та конфігурації. Тепер поговоримо про особливості Next.js!

Особливості

Next.js має безліч чудових функцій, таких як візуалізація на стороні сервера, маршрутизатори та ледаче завантаження.

Візуалізація на стороні сервера

Next.js виконує рендеринг на стороні сервера за замовчуванням. Це робить вашу програму оптимізованою для пошукових систем. Крім того, ви можете інтегрувати будь-яке проміжне програмне забезпечення, таке як express.js або Hapi.js, і ви можете запустити будь-яку базу даних, таку як MongoDB або MySQL.

Говорячи про оптимізацію пошукової системи, Next.js постачається з Headкомпонентом, який дозволяє додавати та створювати динамічні метатеги. Це моя улюблена функція - ви можете створювати власні та динамічні метатеги. Вони дозволяють індексувати ваш веб-сайт такими пошуковими системами, як Google. Ось приклад Headкомпонента:

І ви можете імпортувати та використовувати Headкомпонент на будь-якій іншій сторінці:

Чудово!

Примітка : За допомогою Next.js вам не потрібно імпортувати React, оскільки Next.js робить це за вас.

Створення статичного веб-сайту за допомогою Next.js

Окрім рендерингу на стороні сервера, ви все ще можете скомпілювати та експортувати свою програму як статичний веб-сайт HTML і розгорнути її на статичному веб-сайті, що розміщується, як сторінка GitHub або netlify. Ви можете дізнатися більше про те, як створити статичний веб-сайт за допомогою Next.js тут, в офіційних документах.

Маршрутизатори

Це ще одна з чудових можливостей Next.js. Коли ви використовуєте додаток create-response-, вам зазвичай потрібно встановити response-router і створити його власну конфігурацію.

Next.js поставляється зі своїми маршрутизаторами з нульовими налаштуваннями. Вам не потрібна додаткова конфігурація маршрутизаторів. Просто створіть свою сторінку всередині pagesпапки, і Next.js подбає про всю конфігурацію маршрутизації.

Давайте створимо власну навігацію, щоб все було зрозуміло!

Для навігації між сторінками Next.js має Linkметод управління навігацією.

Давайте створимо blog.jsі contact.jsсторінки:

blog.js

І ось contact.jsсторінка:

І тепер ми повинні мати можливість переміщатися між цими сторінками?

Ого, що так легко та надзвичайно чудово.

Ліниве завантаження

Ледаче завантаження робить вашу програму кращою для користувачів. Іноді завантаження сторінки може зайняти час. Користувач може відмовитися від вашого додатка, якщо завантаження триває більше 30 секунд.

Щоб уникнути цього, використовуйте якусь хитрість, щоб вказати користувачеві, що сторінка завантажується, наприклад, показавши спінер. Ледаче завантаження або розбиття коду - одна з функцій, яка дозволяє мати справу з повільним завантаженням і контролювати повільне завантаження, тому ви завантажуєте лише необхідний код на свою сторінку.

Next.js поставляється зі своїм власним методом розбиття коду. Він надає нам метод, що називається dynamic, для завантаження нашого компонента, як у прикладі нижче:

Ви можете знайти вихідний код цих прикладів на GitHub

Це все. Сподіваюся, цього достатньо, і я сподіваюся, що ця стаття дає вам чітке уявлення про Next.js та його особливості. Ви можете дізнатись більше про інші функції в офіційних документах.

Якщо у вас є якісь інші доповнення до цієї публікації, ви можете залишити коментар нижче, і якщо вам подобається ця публікація, натисніть "хлопайте"? і поділитися.

Обговорювати в Twitter ?.

До речі, нещодавно я працював із потужною групою інженерів програмного забезпечення для одного зі своїх мобільних додатків. Організація була чудовою, і продукт був доставлений дуже швидко, набагато швидше, ніж інші фірми та фрілансери, з якими я працював, і я думаю, що можу чесно рекомендувати їх для інших проектів. Напишіть мені електронного листа, якщо хочете зв’язатись - [email protected]