Next.js
Огромное руководство по изучению фреймворка Next.js: https://www.freecodecamp.org/news/the-next-js-handbook/
Подойдёт тем, кто вообще не знаком с этим фреймворком. Но при этом будет здорово, если у вас есть минимальный опыт с React.
#фронтенд #javascript #nextjs
Огромное руководство по изучению фреймворка Next.js: https://www.freecodecamp.org/news/the-next-js-handbook/
Подойдёт тем, кто вообще не знаком с этим фреймворком. Но при этом будет здорово, если у вас есть минимальный опыт с React.
#фронтенд #javascript #nextjs
👍1
Jamstack: философия веб-разработки на примере Next.js
Jamstack сегодня можно определить как современную архитектуру веб-разработки, которая позволяет создавать веб-сайты на основе методологии микросервисов. Это крайне удачное решение для разработки, которое объединяет различные подходы, при этом сохраняя только лучшие моменты каждого.
Подробнее в статье:
https://tproger.ru/articles/preimushhestva-jamstack-na-primere-next-js/
#nextjs #jamstack
Jamstack сегодня можно определить как современную архитектуру веб-разработки, которая позволяет создавать веб-сайты на основе методологии микросервисов. Это крайне удачное решение для разработки, которое объединяет различные подходы, при этом сохраняя только лучшие моменты каждого.
Подробнее в статье:
https://tproger.ru/articles/preimushhestva-jamstack-na-primere-next-js/
#nextjs #jamstack
👍18👎1
Что, когда, почему и как: Новая функция промежуточного программного обеспечения Next.js
Промежуточное программное обеспечение Next.js позволяет создавать функции, которые выполняются после того, как запрос пользователя сделан, и до того, как запрос будет выполнен — в середине двух процессов. Это сильно расширяет диапазон ваших возможностей. Подробнее в этом материале:
https://www.smashingmagazine.com/2022/04/next-js-middleware-feature/
#nextjs
Промежуточное программное обеспечение Next.js позволяет создавать функции, которые выполняются после того, как запрос пользователя сделан, и до того, как запрос будет выполнен — в середине двух процессов. Это сильно расширяет диапазон ваших возможностей. Подробнее в этом материале:
https://www.smashingmagazine.com/2022/04/next-js-middleware-feature/
#nextjs
👍18🤔1
NextJS быстрый курс. SSR на React JS
NextJS — это открытый JavaScript-фреймворк, созданный поверх React.js для создания веб-приложений.
В этом небольшом курсе вы в рамках одного видео сможете познакомиться и научиться работать с NextJS, а также разберётесь с рендерингом на стороне сервера:
https://youtu.be/_EOrSmjdOZQ
#видео #nextjs #react
NextJS — это открытый JavaScript-фреймворк, созданный поверх React.js для создания веб-приложений.
В этом небольшом курсе вы в рамках одного видео сможете познакомиться и научиться работать с NextJS, а также разберётесь с рендерингом на стороне сервера:
https://youtu.be/_EOrSmjdOZQ
#видео #nextjs #react
👍8👎1
С локального хостинга в облако: деплоим сайт с Next.js, Django и Kubernetes
Представьте, вы разработали потрясающий сайт и теперь пришло время сделать его доступным для всего мира. Но процесс развёртывания может показаться сложным. Kubernetes вам поможет. Благодаря своим мощным функциям и интеллектуальному управлению контейнерами Kubernetes устраняет сложность развёртывания веб-сайта.
В этом руководстве вы детально пройдёте через процесс развёртывания веб-сайта без особых усилий:
https://dev.to/chetanam/from-localhost-to-cloud-nextjs-django-ssl-github-actions-dns-ultimate-website-deployment-tutorial-34hp
#nextjs #django #kubernetes
Представьте, вы разработали потрясающий сайт и теперь пришло время сделать его доступным для всего мира. Но процесс развёртывания может показаться сложным. Kubernetes вам поможет. Благодаря своим мощным функциям и интеллектуальному управлению контейнерами Kubernetes устраняет сложность развёртывания веб-сайта.
В этом руководстве вы детально пройдёте через процесс развёртывания веб-сайта без особых усилий:
https://dev.to/chetanam/from-localhost-to-cloud-nextjs-django-ssl-github-actions-dns-ultimate-website-deployment-tutorial-34hp
#nextjs #django #kubernetes
🤨8😐4👍2😁1
Как работает Next Image в Next.js
Если вы работали с Next.js, скорее всего, вы сталкивались с компонентом Next Image. Он позволяет оптимизировать изображения, при этом поддерживает современные форматы, такие как webp и avif, а также генерирует несколько версий, адаптированных под различные размеры экранов.
При этом «из коробки» всё работает максимально просто при минимуме кода. Такая простота достигается благодаря внутренней сложности компонента: он состоит из трёх других компонентов React Next Image, API изображений и оптимизатора изображений. Но обо всём по порядку:
https://tproger.ru/articles/veshhi-o-kotoryh-vy-mogli-ne-znat-o-next-image
#nextjs #бэкенд
Если вы работали с Next.js, скорее всего, вы сталкивались с компонентом Next Image. Он позволяет оптимизировать изображения, при этом поддерживает современные форматы, такие как webp и avif, а также генерирует несколько версий, адаптированных под различные размеры экранов.
При этом «из коробки» всё работает максимально просто при минимуме кода. Такая простота достигается благодаря внутренней сложности компонента: он состоит из трёх других компонентов React Next Image, API изображений и оптимизатора изображений. Но обо всём по порядку:
https://tproger.ru/articles/veshhi-o-kotoryh-vy-mogli-ne-znat-o-next-image
#nextjs #бэкенд
👍9💩2
Как преобразовать компоненты Figma в Next.js с помощью Tailwind CSS
В эпоху быстрого развития веб-технологий стандарты дизайна быстро меняются. Разработчикам иногда сложно учитывать все новшества при вёрстке.
В этой статье вы увидите простой автоматический способ преобразования конструкций Figma в Next.js-код с помощью Tailwind CSS:
https://blog.logrocket.com/convert-figma-components-next-js-tailwind-css/
#figma #css #nextjs #фронтенд
В эпоху быстрого развития веб-технологий стандарты дизайна быстро меняются. Разработчикам иногда сложно учитывать все новшества при вёрстке.
В этой статье вы увидите простой автоматический способ преобразования конструкций Figma в Next.js-код с помощью Tailwind CSS:
https://blog.logrocket.com/convert-figma-components-next-js-tailwind-css/
#figma #css #nextjs #фронтенд
🤮8❤4👍3💩2🤡1
Объёмный курс по Next.js
В этом курсе вы за 2 часа узнаете, что такое рендеринг на стороне сервера, как работает генерация статического сайта и когда вам следует выбрать Next.js для вашего следующего проекта. А также, как настроить следующий проект и использовать возможности Next.js по максимуму:
https://youtu.be/uU80SSxn9_c
#видео #nextjs #бэкенд
В этом курсе вы за 2 часа узнаете, что такое рендеринг на стороне сервера, как работает генерация статического сайта и когда вам следует выбрать Next.js для вашего следующего проекта. А также, как настроить следующий проект и использовать возможности Next.js по максимуму:
https://youtu.be/uU80SSxn9_c
#видео #nextjs #бэкенд
👎6👍1
Как сделать сайт в стиле терминала за считанные минуты
Забавный, настраиваемый и простой в использовании шаблон в стиле терминала, созданный на базе Next.js.
Для изменения контента сайта нужно работать только с одним файлом config.json. А ещё LiveTerm также можно использовать с Docker.
Сохраните, чтобы не потерять: https://github.com/Cveinnt/LiveTerm
#nextjs
Забавный, настраиваемый и простой в использовании шаблон в стиле терминала, созданный на базе Next.js.
Для изменения контента сайта нужно работать только с одним файлом config.json. А ещё LiveTerm также можно использовать с Docker.
Сохраните, чтобы не потерять: https://github.com/Cveinnt/LiveTerm
#nextjs
👍11🤯2
Разворачиваем микрофронты на Next.js
Это не пошаговый гайд, но наглядная демонстрация удобства использования микрофронтенда в проекте, где требуется множество разных модулей. В данном случае речь о единой админ-панели, которая должна отображать конкретные модули в зависимости от того, какого отдела компании эта админка.
Посмотреть полезно всем — кто хочет понять, что за микрофронты такие, и кто хочет научиться работать с ними более эффективно. Материал по ссылке: https://habr.com/ru/articles/889202/
#nextjs #микрофронтенд
Это не пошаговый гайд, но наглядная демонстрация удобства использования микрофронтенда в проекте, где требуется множество разных модулей. В данном случае речь о единой админ-панели, которая должна отображать конкретные модули в зависимости от того, какого отдела компании эта админка.
Посмотреть полезно всем — кто хочет понять, что за микрофронты такие, и кто хочет научиться работать с ними более эффективно. Материал по ссылке: https://habr.com/ru/articles/889202/
#nextjs #микрофронтенд
👍3❤1
Один вечер + GPT → адаптивный SPA-сайт на Next.js без кода
Представьте, что вы описываете сайт в текстовом поле — и через пару минут получаете готовый SPA на Next.js с адаптивной вёрсткой, Tailwind, формой подписки и даже аналитикой. Без HTML, без CSS, без сборки руками. Это не будущее, а рабочий кейс: в статье показано, как GPT и Vercel V0 позволяют разработчику сэкономить часы, а то и дни, на типовых задачах.
#фронтенд #nextjs #ии
Представьте, что вы описываете сайт в текстовом поле — и через пару минут получаете готовый SPA на Next.js с адаптивной вёрсткой, Tailwind, формой подписки и даже аналитикой. Без HTML, без CSS, без сборки руками. Это не будущее, а рабочий кейс: в статье показано, как GPT и Vercel V0 позволяют разработчику сэкономить часы, а то и дни, на типовых задачах.
#фронтенд #nextjs #ии
👎41💩4🤔3