I started my exploration in PWA having some prior knowledge about PWA with NextJS. It is always good to know where you want to start in everything. From my past exposure, I learned about next-pwa , an out of the box package to make a Next project become a PWA. It is advertised as “Zero Config PWA Plugin for Next.js” and that was what I wanted to reduce development time. I wish everything was as smooth as I always expected (but rarely happened) as the advertisement. Yes, it has minimal config if you don’t need to make it work with other plugins. I did not know about that until my first attempt failed badly because of my lack of understanding how to combine configs in next.config.js . Below was how I thought I did it right…
The issue with this is that you can only use module.exports once. However, I was not careful enough to check all pages before submit my commit and since it showed the install option on mobile browser, I thought the commit was good to go until Chris pointed out that the About page did not load. That was when I learned that you should not have two module.exports .
I did a bit of research on the internet and found next-compose , a package to compose plugins together. I was thinking “Great! Problem solved!”. I followed the instruction in the README, and came up with something quite organized.
But then the About page still did not load. It was quite frustrating up to a point that I had to take a break from it and informed the team that we might need to take a different approach.
When I felt more composured, I decided to take another look at the PR and tried to figure out what I did wrongly. It turned out that withMDX plugin is structured a little bit differently and the way I set it up with next-compose was not incorrected. Also, Chris mentioned that someone during the triage meeting suggested to use another better established package called next-compose-plugins to solve the issue I had. Combining all information I have from the internet and what required for next-compose-plugins to work, I ended up adding a custom babel config file and a custom webpack config file as well as installing a few dependencies. Everything seemed to be in order, just that I still did not work…My very first attempt with next-compose-plugins can be found here. At this point, I felt that I needed to figure this out because it bothered me so much that I could not allow myself to give up on it. And the series of trials and failures began…
This blog ended here to express my frustration in the first attempt with PWA. In the next blog, I will explain how I successfully implemented a solution that worked.
Thank you for reading.
Tony Vu.
