Зміст[Сховати][Показати]
Вибираючи бібліотеку програмного забезпечення або фреймворк, зазвичай враховується досвід розробника.
Коли я згадую «досвід розробника», я маю на увазі те, як розробники насправді виконують роботу. Розробники вибирають бібліотеки або фреймворки, якими приємно користуватися.
Це одна з основних причин, чому зараз у нас є найпопулярніші бібліотеки та фреймворки. Як розробникам, нам не потрібно починати з нуля, коли існують інструменти, які допомагають нам виконувати наші завдання.
Фреймворки — це частини програмного забезпечення, які створюються та використовуються розробниками для створення додатків, і NextJS є одним із них.
У цій публікації ми розглянемо Nextjs, його ключові функції та те, як ми можемо використовувати його для створення програми. Давайте стрибаємо відразу.
Що таке Next.js?
Next.js це фреймворк JavaScript для швидкого та легкого створення статичних веб-сторінок та онлайн-додатків на основі React. Це дозволяє створювати чудові веб-програми для різних платформ, включаючи Windows, Linux і Mac.
Ви повинні бути знайомі з фреймворком Next.js, якщо ви мінімально знайомі з react і хочете дізнатися більше про екосистему react.
Незважаючи на те, що Next.js постачається з усім необхідним для початку, ви можете вибрати між NPM і Yarn, JavaScript і TypeScript, CSS і SCSS, статичним експортом і безсерверним розгортанням.
риси
- Маршрутизація виконується автоматично – вам не потрібно нічого налаштовувати, оскільки будь-яка URL-адреса зіставляється з файловою системою, з файлами в папці сторінок (у вас, звичайно, є параметри налаштування).
- Компоненти одного файлу – До компонента легко додати стилі, що мають область дії, за допомогою styled-jsx, який повністю інтегрований та створений однією командою.
- Перезавантаження гарячого коду – коли Next.js виявляє модифікацію, збережену на диску, він перезавантажує сторінку.
- Динамічні компоненти – Ви можете динамічно завантажувати модулі JavaScript та компоненти React.
- Статичний експорт – Next.js дозволяє експортувати повністю статичний сайт із програми за допомогою наступної команди експорту.
- Сумісність із середовищем – Next.js легко інтегрується з екосистемами JavaScript, Node та React.
- Автоматичне розділення кодів – для відтворення сторінок використовуються лише необхідні бібліотеки та JavaScript. Замість того, щоб створити один файл JavaScript, який містить весь код програми, Next.js розумно розділяє програму на багато ресурсів.
Як створити додаток next.js?
установка
Ви можете використовувати команду node npx для встановлення та створення проекту Next.js.
Це створить папку та всі файли, конфігурації та інші елементи, необхідні для запуску проекту Next.js.
Ви можете запустити програму після її створення.
Сторінки та маршрутизація
Щоб обробляти маршрути за допомогою Next.js, нам не потрібно використовувати фреймворк маршрутизації. Налаштувати маршрутизацію за допомогою Next.js дуже просто. Коли ви використовуєте команду create-next-app для створення нової програми Next.js, програма створює папку під назвою «pages» за замовчуванням.
У цій папці «сторінки» ви зберігаєте свої маршрути. В результаті кожен файл компонентів реакції в підкаталозі буде оброблятися як окремий маршрут.
Наприклад, якщо папка містить такі файли:
- index.js
- about.js
- aricles.js
Цей файл буде автоматично перетворено трьома способами:
- Сторінка індексу localhost/index
- Сторінка про localhost/about
- Сторінка блогу localhost/articles
Нижче наведено приклад сторінки about.js. Як бачите, про сторінку нічого не надано. Це просто стандартний функціональний компонент React.
Маршрути
Щоб створити вкладені маршрути, спочатку потрібно створити підтеку. Наприклад: сторінки/статті. Створіть у цій папці свій компонент реагування 'contact.js', і він згенерує сторінку localhost/articles/contact.
Якщо помістити один файл у pages/articles.js, а інший у pages/articles/index.js. Обидва відображають той самий шлях localhost/blog. У цій ситуації Next.js просто відтворить файл article.js. Як щодо динамічних маршрутів, у яких кожна публікація блогу має свій шлях:
- локальний хост/блог/перша стаття
- localhost/blog/-друга-стаття
Використовуючи нотацію в дужках, ви можете визначити динамічний маршрут у Next.js. Наприклад: pages/article/[slug].js
Маршрути посилань
Ви завершили свій перший маршрут. Я припускаю, що ви питаєте, як підключити сторінки до цих маршрутів. Для цього вам знадобиться «наступний/посилання».
Ось приклад домашньої сторінки, яка містить посилання на сторінку Про:
Якщо ви хочете стилізувати посилання, використовуйте наступний синтаксис:
Маршрути перенаправлення
Що робити, якщо вам потрібно примусово переспрямувати на певну сторінку? Наприклад, при натисканні кнопки? Ви можете зробити це за допомогою 'router.push':
SEO
Сторінки у веб-додатках вимагають мета-елементів (голова) на додаток до даних у тілі HTML. Це вимагатиме встановлення додаткової вимоги під назвою React Helmet у програмі React.
Ми можемо використовувати компонент Head from next/head in Next, щоб легко додавати метадані на наші веб-сторінки, які відображатимуться в результатах пошуку та вбудовування:
компоненти
Вам часто потрібно буде розробляти компоненти або файл макета. Наприклад, компонент, який відображає панель навігації. Поки що ми використовували лише папку сторінок. Що робити, якщо ваш компонент не призначений як сторінка маршруту?
Ви не хочете, щоб користувач переходив на таку сторінку, як localhost/navbar. Якщо розмістити компонент Navbar.js в папку pages, це станеться саме так. Що робити в ситуації?
Просто зберігайте всі ваші компоненти «не сторінка» в окремій папці. Більшість проектів Next.js використовують назву «компоненти», і ця папка створюється в кореневій папці вашого проекту.
Головний компонент
Початкове завантаження сторінки відтворюється Next.js на стороні сервера. Це робиться шляхом зміни HTML вашої сторінки. Розділ заголовка включено.
Компонент Next.js Head використовується для надання тегів розділу заголовка, таких як title та meta. Компонент Head використовується в цьому прикладі компонента Layout.
Створити сторінку 404 не знайдено
Можна створити власну сторінку помилки 404. Ви можете налаштувати повідомлення або додати свій власний дизайн сторінки. У папці pages створіть файл 404.js.
Коли виникає помилка 404, Next.js автоматично переспрямує на цю сторінку. Ось приклад персоналізованої сторінки 404:
Вибір даних з боку сервера
Замість того, щоб завантажувати дані на стороні клієнта, Next.js дозволяє проводити початкове заповнення даних, що передбачає надсилання сторінки з уже заповненими даними із сервера.
У вас є два варіанти реалізації отримання даних на стороні сервера:
- Дані слід отримувати за кожним запитом.
- Отримувати дані лише один раз протягом усього процесу будівництва (статичний сайт)
Отримати дані для кожного запиту
Метод getServerSideProps використовується для відтворення кожного запиту на стороні сервера. Цю функцію можна включити в кінець файлу компонента. Next.js автоматично заповнить ваші реквізити компонентів об’єктом getServerSideProps, якщо ця функція присутня у файлі компонента.
Отримати дані під час складання
Метод getStaticProps використовується для відтворення на стороні сервера під час складання. Цю функцію можна включити в кінець файлу компонента. Цей метод запускає код сервера та надсилає запит GET на сервер, але лише один раз, коли наш проект буде завершено.
Чому ви повинні вивчати Next.js?
Однією з причин цього є те, що Next.js побудовано на основі React, інструментарію для інтерфейсної розробки для створення інтерфейсів користувача це мій улюблений вибір для розробки веб-додатків.
Але цього було б недостатньо, якби Next.js не був добрим у тому, що він зробив… чи не так?
Отже, що саме він робить?
Ми повинні спочатку визначити кілька понять, щоб зрозуміти це. Next.js набув популярності, оскільки він вирішив проблему, яку багато веб-розробників мали з клієнтськими веб-програмами (у браузері). Ці односторінкові програми (SPA) мали кращий досвід, оскільки їм не потрібно було, щоб користувач перезавантажував сторінку, і забезпечували більше інтерактивності.
Однак, оскільки основна частина матеріалу в такій програмі стає видимою лише тоді, коли вона виконується у браузері, веб-сканерам важко зрозуміти текстовий вміст такої програми.
В результаті, незважаючи на свою популярність, багато SPA залишалися в основному анонімними для великих пошукових систем, таких як Google. Next.js тепер містить більш надійний вбудований механізм для відтворення на стороні сервера (SSR) компонентів React.
Next.js дозволяє розробникам створювати код JavaScript на сервері під час процесу збірки та надавати користувачеві базовий індексований HTML.
профі
- Чудово підходить для користувацького досвіду
- Чудово підходить для SEO
- Створіть супершвидкий статичний веб-сайт, який веде себе як динамічний
- Гнучкість у створенні UI та UX.
- Багато переваг розвитку
- Велика підтримка громади
мінуси
- Веб-сайти або програми мають певний час для створення або розробки.
- Для певних завдань Next.js недостатньо. Розробники повинні мати можливість будувати динамічні маршрути за допомогою інструментів Node.js.
Висновок
Як бачите, Next.js спрощує розробку додатків React і дозволяє зосередитися на найважливішому – логіці вашої програми та інтерфейсі користувача. Він включає в себе все необхідне для створення сучасних додатків, багатих на інтерфейс і API.
Він також підходить для проектів лише з вмістом, таких як блоги та бізнес-сайти, завдяки його здатності створювати статичні сторінки HTML.
З поточними випусками Next.js не лише підтримує високий рівень досвіду розробників, але й надає інструменти для підвищення візуальної продуктивності та досвіду користувачів, забезпечуючи світле майбутнє для цієї фреймворку.
залишити коментар