Convert Next.js 14+ App to PWA (Progressive web app) | What is PWA and its Benefits

Подписаться 7 тыс.

Просмотров 17 тыс.

50% 1

In this video, you will first get overview of project what we will be building. Then, I will show you how to create next.js 14 project and configure it so it can be converted into pwa (progressive web app). I will test pwa app with practical examples on desktop browser and mobile devices as well.
Finally I will explain you the benefits of PWA.
00:07 Demo of next.js 14 PWA app (what is PWA)
04:17 Create a new next.js 14 project
05:47 Learn Next.js 14 Tutorials
06:16 Install npm package for next PWA
07:10 Configure next.js project with PWA
14:25 Test next.js for PWA
18:45 Fix theme color error
19:57 Benefits of PWA
#nextjs14 #progressivewebapps #nextjstutorial
Follow Whatsapp Channel:
whatsapp.com/channel/0029Va7y...
React tutorials:
• React.js Tutorials
JavaScript Tutorials and Projects:
• JavaScript Tutorial an...
Angular Tutorials:
• Angular 16 Life Cycle ...
Angular 16 Crash Course For Begineers:
• Angular 16 Crash Course
Tech Tutorials - Random:
• Postman Tutorial - Tes...
Complete Next.js 13 Tutorials: • Next.js 13 Tutorials -...
Next.js 14 Tutorials:
• Next.js 14 Tutorials -...
Node Express MongoDB Bootcamp: • Build REST API with No...
ChatGPT Tutorials: • ChatGPT
Join our facebook group:
/ 996305460498149
Contact us for development services:
/ umair-jameel-24aa5368

Опубликовано:

26 ноя 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 46

@abuzaryaseen474 4 месяца назад

Amazing after spending the whole day reading different articles, finally implemented it with the help of your tutorial

@user-ry1zf7sl8i 5 месяцев назад

Thanks a lot, it's perfectly done! PWA, Next.js

@rheavictor7 3 месяца назад

Really cool video, thanks for this!

@vinaybhadre4664 6 месяцев назад

Awesome buddy ✨ Really help tutorial

@MushfiqFeed 7 месяцев назад

Thank you man. After spending 2 days at last it has been done. I was facing problem at node js 20.10 then downgrade it to 18.19

@Paul-kn4xz 8 месяцев назад

Bro! You're awesome! 🤜🏻🤛🏻

@whyisthiscodenotworking 2 месяца назад

amazing video easiest tutorial ! thx bro

@annielow9294 5 месяцев назад

Thanks bro, great explanations

@zerzxac8996 7 месяцев назад

Thank you for the tutorial, Indians are the best with their tricks

@izz_h 7 месяцев назад

Awesome tutorial

@almeale317 5 месяцев назад

Thanks man!

@maskman4821 8 месяцев назад

awesome, next topic: turn nextjs 14 app into android apk with capacitor && turn nextjs 14 app into windows app with electronjs ❤

@ProgrammingwithUmair321 8 месяцев назад

Sure 🥳

@idkanythinganymoree 7 месяцев назад

Instant sub

@user-hm9cf5or8f 8 месяцев назад

Happy Birthday !

@carchutogimenez8539 3 месяца назад

Hi! Awesome tutorial, thank you! According to the author, for new projects we should use Serwist. It would be great if you have the time to do a tutorial using Serwist

@GajendranMegajolla 3 месяца назад

thanks for the effort

@user-zo7vy6tc8y 7 месяцев назад

i have problem Content is not sized correctly for the viewportThe viewport size of 436px does not match the window size of 412px. how can i fix it?

@shubhamrawat9596 6 месяцев назад

ThankU ❤

@nexthero2616 8 месяцев назад

Nice bro

@dayanr.5950 7 месяцев назад

What happens when you have an app with several urls that contains params? I get error

@ziyabnajeeb 6 месяцев назад

Good work brother, only one thing, u r also able to send and receive notifications on the devices with pwa...

@muhammadalifdanielbinmohdh3188 4 месяца назад

how do i make the theme color and background color dynamic using tailwind or next theme

@creatingnewthings5849 7 месяцев назад

bro, I love you

@VoceBR97 3 месяца назад

Can you make a video explaining how to create a service-worker? for example to intercept data coming from a database, api. And save them in cache to make it a little more dynamic?

@ilmioiosottoilletto Месяц назад

Any idea on how to cache request done by server components?

@kacperkepinski4990 8 месяцев назад

i still dont know when to change id...., it was very unclear for me

@krystianwojtowicz9305 7 месяцев назад

i have files but i dont have download icon

@dileepparmar1514 4 месяца назад

thank you so much sir, how can i use it in other computer?

@TemmyCodingLifestyle 8 месяцев назад

Thank you. Does that mean the app has a kind of notification system with sound, and it's installed on mobile. will the sound notification work?

@ProgrammingwithUmair321 8 месяцев назад

Yes, If you have notifications implemented.

@krystianwojtowicz9305 7 месяцев назад

No supplied icon is at least 144 px square in PNG, SVG or WebP format, with the purpose attribute unset or set to "any"

@tejasivanarayanaprathipati4356 3 месяца назад

It is beacause of the icons. Try following these steps.. 1. Open any website which converts photos into different sizes icons 2. Download those icons (Must download 144*144 sized icon) 3. Copy those icons(png type) to public 4. now in manifest.json file change the path of the images 5. Include 144*144 size icon also

@solomonsunday5537 5 месяцев назад

Thanks a lot for this lecture, please can you also show us how to prompt a user to update the PWA app when there is an update?

@swire1571 5 месяцев назад

set reloadOnline in next.config.js. so it will automatically reload the cache

@Enigma237x 7 месяцев назад

Please would this work exactly for Nextjs app thar is not using src directory?

@burgerxxiii 7 месяцев назад

Same procedure. I didn't do anything differently for mine to work

@Enigma237x 7 месяцев назад

Yeah mine just work. But I was having issues with the images, kept giving errors at the lighthouse but I used this site Pwa builder and it is working now

@burgerxxiii 7 месяцев назад

can you share the link of the PWA builder?@@Enigma237x

@z1982_ 3 месяца назад

Thanks you! But you don't really show offline support in details

@KhanGaming-ls5ue 8 месяцев назад

Bro another Urdu channel

@chrisbitoy7272 2 месяца назад

Why make mountain out of a rock, why not use the code from the makers of `next-pwa`: ``` const withPWA = require('next-pwa')({ dest: 'public' }) module.exports = withPWA({ // next.js config }) ``` - plain and simple.