aerolab / nextjs-pwa

Build a PWA with Next.JS

Build a PWA with Next.JS

This is the companion repo of How to build a PWA with Next.JS.

It features a Hacker News Reader built with React and Styled JSX using Next.JS.

License

MIT

nextjs-pwa's Issues

using styled-components

I see you are using <style jsx>. Can you please show me how to use styled-components instead?

I know how to use it when it extends Document since it has access to the renderPage. But with the Layout.js it is not extending Document so how would you get access to the renderPage?

Thanks

Express example

Any idea what the best way to run on express?

README link is broken 😱

The truth link is blog/react-nextjs-pwa but the link matches to pwa-react-nextjs 😅

Trying to run it on Heroku

But I am getting those errors, any idea why?

Starting process with command `npm start`
2018-01-04T04:25:44.463448+00:00 app[web.1]: 
2018-01-04T04:25:44.463476+00:00 app[web.1]: > [email protected] start /app
2018-01-04T04:25:44.463489+00:00 app[web.1]: > NODE_ENV=production node server.js
2018-01-04T04:25:44.463491+00:00 app[web.1]: 
2018-01-04T04:25:44.809950+00:00 app[web.1]: > Ready on http://localhost:46078
2018-01-04T04:25:45.932300+00:00 heroku[web.1]: State changed from starting to up
2018-01-04T04:25:54.791603+00:00 app[web.1]: { Error: Cannot find module 'styled-jsx\style.js'
2018-01-04T04:25:54.791619+00:00 app[web.1]:     at Function.Module._resolveFilename (module.js:538:15)
2018-01-04T04:25:54.791621+00:00 app[web.1]:     at Function.Module._load (module.js:468:25)
2018-01-04T04:25:54.791622+00:00 app[web.1]:     at Module.require (module.js:587:17)
2018-01-04T04:25:54.791623+00:00 app[web.1]:     at require (internal/module.js:11:18)
2018-01-04T04:25:54.791624+00:00 app[web.1]:     at Object.<anonymous> (/app/.next/dist/pages/index.js:35:14)
2018-01-04T04:25:54.791624+00:00 app[web.1]:     at Module._compile (module.js:643:30)
2018-01-04T04:25:54.791625+00:00 app[web.1]:     at Object.Module._extensions..js (module.js:654:10)
2018-01-04T04:25:54.791625+00:00 app[web.1]:     at Module.load (module.js:556:32)
2018-01-04T04:25:54.791626+00:00 app[web.1]:     at tryModuleLoad (module.js:499:12)
2018-01-04T04:25:54.791626+00:00 app[web.1]:     at Function.Module._load (module.js:491:3) code: 'MODULE_NOT_FOUND' }
2018-01-04T04:25:54.798898+00:00 app[web.1]: { Error: Cannot find module 'next\dist\lib\error.js'
2018-01-04T04:25:54.798900+00:00 app[web.1]:     at Function.Module._resolveFilename (module.js:538:15)
2018-01-04T04:25:54.798901+00:00 app[web.1]:     at Function.Module._load (module.js:468:25)
2018-01-04T04:25:54.798902+00:00 app[web.1]:     at Module.require (module.js:587:17)
2018-01-04T04:25:54.798902+00:00 app[web.1]:     at require (internal/module.js:11:18)
2018-01-04T04:25:54.798903+00:00 app[web.1]:     at Object.<anonymous> (/app/.next/dist/pages/_error.js:3:18)
2018-01-04T04:25:54.798904+00:00 app[web.1]:     at Module._compile (module.js:643:30)
2018-01-04T04:25:54.798905+00:00 app[web.1]:     at Object.Module._extensions..js (module.js:654:10)
2018-01-04T04:25:54.798905+00:00 app[web.1]:     at Module.load (module.js:556:32)
2018-01-04T04:25:54.798906+00:00 app[web.1]:     at tryModuleLoad (module.js:499:12)
2018-01-04T04:25:54.798907+00:00 app[web.1]:     at Function.Module._load (module.js:491:3) code: 'MODULE_NOT_FOUND' }
2018-01-04T04:25:55.150263+00:00 app[web.1]: { Error: Cannot find module 'next\dist\lib\error.js'
2018-01-04T04:25:55.150277+00:00 app[web.1]:     at Function.Module._resolveFilename (module.js:538:15)
2018-01-04T04:25:55.150278+00:00 app[web.1]:     at Function.Module._load (module.js:468:25)
2018-01-04T04:25:55.150279+00:00 app[web.1]:     at Module.require (module.js:587:17)
2018-01-04T04:25:55.150279+00:00 app[web.1]:     at require (internal/module.js:11:18)
2018-01-04T04:25:55.150281+00:00 app[web.1]:     at Object.<anonymous> (/app/.next/dist/pages/_error.js:3:18)
2018-01-04T04:25:55.150281+00:00 app[web.1]:     at Module._compile (module.js:643:30)
2018-01-04T04:25:55.150282+00:00 app[web.1]:     at Object.Module._extensions..js (module.js:654:10)
2018-01-04T04:25:55.150282+00:00 app[web.1]:     at Module.load (module.js:556:32)
2018-01-04T04:25:55.150283+00:00 app[web.1]:     at tryModuleLoad (module.js:499:12)
2018-01-04T04:25:55.150284+00:00 app[web.1]:     at Function.Module._load (module.js:491:3) code: 'MODULE_NOT_FOUND' }
2018-01-04T04:25:55.154827+00:00 heroku[router]: at=info method=GET path="/favicon.ico" host=bitcoinvsaltcoins.herokuapp.com request_id=c40f8b48-8a93-43dd-88d7-f5ff49f7a6c3 fwd="186.15.29.74" dyno=web.1 connect=0ms service=11ms status=500 bytes=164 protocol=https
2018-01-04T04:25:54.804717+00:00 heroku[router]: at=info method=GET path="/" host=bitcoinvsaltcoins.herokuapp.com request_id=e629f750-514e-406d-8e57-df9b10a88901 fwd="186.15.29.74" dyno=web.1 connect=0ms service=53ms status=500 bytes=164 protocol=https
2018-01-04T04:26:02.330838+00:00 app[web.1]: { Error: Cannot find module 'styled-jsx\style.js'
2018-01-04T04:26:02.330860+00:00 app[web.1]:     at Function.Module._resolveFilename (module.js:538:15)
2018-01-04T04:26:02.330861+00:00 app[web.1]:     at Function.Module._load (module.js:468:25)
2018-01-04T04:26:02.330862+00:00 app[web.1]:     at Module.require (module.js:587:17)
2018-01-04T04:26:02.330862+00:00 app[web.1]:     at require (internal/module.js:11:18)
2018-01-04T04:26:02.330863+00:00 app[web.1]:     at Object.<anonymous> (/app/.next/dist/pages/index.js:35:14)
2018-01-04T04:26:02.330864+00:00 app[web.1]:     at Module._compile (module.js:643:30)
2018-01-04T04:26:02.330865+00:00 app[web.1]:     at Object.Module._extensions..js (module.js:654:10)
2018-01-04T04:26:02.330865+00:00 app[web.1]:     at Module.load (module.js:556:32)
2018-01-04T04:26:02.330866+00:00 app[web.1]:     at tryModuleLoad (module.js:499:12)
2018-01-04T04:26:02.330866+00:00 app[web.1]:     at Function.Module._load (module.js:491:3) code: 'MODULE_NOT_FOUND' }

next-manifest and next-offline

You may want to consider next-manifest and next-offline. I am still learning about all this but they seem like they might greatly simplify a next.js PWA implementation.

Where to find the documentation for the webpack plugin options for runtimeCaching and verbose?

I've visited https://github.com/goldhand/sw-precache-webpack-plugin but there's no documentation on the options you added in the nextjs.config.js on the verbose and runtimeCaching

Could you point me to the documentation for these and what they do?

Adding navigateFallback does not work

Hi,

Thank you for providing an example implementation of a PWA with nextjs. I was implementing a similar model to my nextjs app and with my config for the service worker in next.config.js i added then setting called navigateFallback="/index" to add a fallback page if the network is down so the service worker can deliver that and the app continues to display some cached content even if the network is down.

That setting however doesn't work and when the network is turned off it still shows a 404 page saying the page can not be found and so the redirect doesn't work.

I wonder if you have found this bug or have a solution to get that to work?

BW
P