Closed
Description
Summary
Description
This web application is built in Next.js version 12, @netlify/plugin-nextjs version 4.1.0, and next-pwa. The package next-pwa is being used to generate Progressive Web Application. The service worker is registered when my Next.js app being built or deployed in Netlify.
In the function, getStaticSiteProps, The data is fetched from the json files in AWS S3, Cloudfront is now applied, then the api url is like,
https://xxxxxxxxxxxxxxx.cloudfront.net/api/data.json
So I set the revalidate time to 10 minutes, but the page doesn't change the content after more than 10 minutes.
However, when i build this app in my local machine with commands "next build & next start", the updated contents is displayed normally.
I have thought the ISR is fully supported. does the service worker cause this problem?
The Code
next.config.js
const withPWA = require('next-pwa');
const runtimeCaching = require('next-pwa/cache');
/** @type {import('next').NextConfig} */
module.exports = withPWA({
reactStrictMode: true,
pwa: {
dest: 'public',
register: true,
skipWaiting: true,
runtimeCaching,
buildExcludes: [/middleware-manifest.json$/],
},
});Dependencies package.json
{
"dependencies": {
"axios": "^0.24.0",
"next": "12.0.4",
"next-pwa": "^5.4.1",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"@netlify/plugin-nextjs": "^4.1.0",
"@types/node": "16.11.10",
"@types/react": "17.0.37",
"autoprefixer": "^10.4.0",
"eslint": "7",
"eslint-config-next": "12.0.4",
"postcss": "^8.4.3",
"tailwindcss": "^2.2.19",
"typescript": "4.5.2"
}
}Steps to reproduce
In Summary
A link to a reproduction repository
https://github.com/quavious/too-much-news
Plugin version
4.1.0
More information about your build
- I am building using the CLI
- I am building using file-based configuration (
netlify.toml)
What OS are you using?
Windows
Your netlify.toml file
`netlify.toml`
[build]
command = "npm run build"
publish = ".next"
[[plugins]]
package = "@netlify/plugin-nextjs"Your public/_redirects file
`_redirects`
# Paste content of your `_redirects` file hereYour next.config.js file
`next.config.js`
const withPWA = require('next-pwa');
const runtimeCaching = require('next-pwa/cache');
/** @type {import('next').NextConfig} */
module.exports = withPWA({
reactStrictMode: true,
pwa: {
dest: 'public',
register: true,
skipWaiting: true,
runtimeCaching,
buildExcludes: [/middleware-manifest.json$/],
},
})<
CA54
span class="pl-kos">;Builds logs (or link to your logs)
Build logs
10:38:35 PM: ────────────────────────────────────────────────────────────────
10:38:35 PM: Netlify Build
10:38:35 PM: ────────────────────────────────────────────────────────────────
10:38:35 PM:
10:38:35 PM: ❯ Version
10:38:35 PM: @netlify/build 25.0.3
10:38:35 PM:
10:38:35 PM: ❯ Flags
10:38:35 PM: baseRelDir: true
10:38:35 PM: buildId: 61bde4367f2fcf000840a76e
10:38:35 PM: deployId: 61bde4367f2fcf000840a770
10:38:35 PM:
10:38:35 PM: ❯ Current directory
10:38:35 PM: /opt/build/repo
10:38:35 PM:
10:38:35 PM: ❯ Config file
10:38:35 PM: /opt/build/repo/netlify.toml
10:38:35 PM:
10:38:35 PM: ❯ Context
10:38:35 PM: production
10:38:35 PM:
10:38:35 PM: ❯ Loading plugins
10:38:35 PM: - @netlify/plugin-nextjs@4.1.0 from netlify.toml and package.json
10:38:36 PM:
10:38:36 PM: ────────────────────────────────────────────────────────────────
10:38:36 PM: 1. @netlify/plugin-nextjs (onPreBuild event)
10:38:36 PM: ────────────────────────────────────────────────────────────────
10:38:36 PM:
10:38:37 PM: Next.js cache restored.
10:38:37 PM: Netlify configuration property "build.environment.NEXT_PRIVATE_TARGET" value changed.
10:38:37 PM:
10:38:37 PM: (@netlify/plugin-nextjs onPreBuild completed in 109ms)
10:38:37 PM:
10:38:37 PM: ────────────────────────────────────────────────────────────────
10:38:37 PM: 2. build.command from netlify.toml
10:38:37 PM: ────────────────────────────────────────────────────────────────
10:38:37 PM:
10:38:37 PM: $ npm run build
10:38:37 PM: > build
10:38:37 PM: > next build
10:38:38 PM: info - Checking validity of types...
10:38:43 PM: info - Creating an optimized production build...
10:38:43 PM: > [PWA] Compile client (static)
10:38:43 PM: > [PWA] Auto register service worker with: /opt/build/repo/node_modules/next-pwa/register.js
10:38:43 PM: > [PWA] Service worker: /opt/build/repo/public/sw.js
10:38:43 PM: > [PWA] url: /sw.js
10:38:43 PM: > [PWA] scope: /
10:38:43 PM: > [PWA] Compile server
10:39:03 PM: info - Compiled successfully
10:39:03 PM: info - Collecting page data...
10:39:06 PM: info - Generating static pages (0/3)
10:39:07 PM: info - Generating static pages (3/3)
10:39:07 PM: info - Finalizing page optimization...
10:39:07 PM: Page Size First Load JS
10:39:07 PM: ┌ ● / (ISR: 600 Seconds) 779 B 74.8 kB
10:39:07 PM: ├ /_app 0 B 74 kB
10:39:07 PM: └ ○ /404 194 B 74.2 kB
10:39:07 PM: + First Load JS shared by all 74 kB
10:39:07 PM: ├ chunks/framework-91d7f78b5b4003c8.js 42 kB
10:39:07 PM: ├ chunks/main-2915869b229d55c9.js 30.1 kB
10:39:07 PM: ├ chunks/pages/_app-0d237a0c5952e57c.js 1.06 kB
10:39:07 PM: ├ chunks/webpack-514908bffb652963.js 770 B
10:39:07 PM: └ css/06bb7e4ab300185c.css 1.61 kB
10:39:07 PM: ○ (Static) automatically rendered as static HTML (uses no initial props)
10:39:07 PM: ● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
10:39:07 PM: (ISR) incremental static regeneration (uses revalidate in getStaticProps)
10:39:07 PM:
10:39:07 PM: (build.command completed in 30.3s)
10:39:07 PM:
10:39:07 PM: ────────────────────────────────────────────────────────────────
10:39:07 PM: 3. @netlify/plugin-nextjs (onBuild event)
10:39:07 PM: ────────────────────────────────────────────────────────────────
10:39:07 PM:
10:39:07 PM: Moving static page files to serve from CDN...
10:39:07 PM: Moved 0 files
10:39:07 PM: Netlify configuration property "redirects" value changed to [
10:39:07 PM: { from: '/_next/static/*', to: '/static/:splat', status: 200 },
10:39:07 PM: {
10:39:07 PM: from: '/_next/image*',
10:39:07 PM: query: { url: ':url', w: ':width', q: ':quality' },
10:39:07 PM: to: '/_ipx/w_:width,q_:quality/:url',
10:39:07 PM: status: 301
10:39:07 PM: },
10:39:07 PM: { from: '/_ipx/*', to: '/.netlify/builders/_ipx', status: 200 },
10:39:07 PM: { from: '/cache/*', to: '/404.html', status: 404, force: true },
10:39:07 PM: { from: '/server/*', to: '/404.html', status: 404, force: true },
10:39:07 PM: { from: '/serverless/*', to: '/404.html', status: 404, force: true },
10:39:07 PM: { from: '/traces', to: '/404.html', status: 404, force: true },
10:39:07 PM: {
10:39:07 PM: from: '/routes-manifest.json',
10:39:07 PM: to: '/404.html',
10:39:07 PM: status: 404,
10:39:07 PM: force: true
10:39:07 PM: },
10:39:07 PM: {
10:39:07 PM: from: '/build-manifest.json',
10:39:07 PM: to: '/404.html',
10:39:07 PM: status: 404,
10:39:07 PM: force: true
10:39:07 PM: },
10:39:07 PM: {
10:39:07 PM: from: '/prerender-manifest.json',
10:39:07 PM: to: '/404.html',
10:39:07 PM: status: 404,
10:39:07 PM: force: true
10:39:07 PM: },
10:39:07 PM: {
10:39:07 PM: from: '/react-loadable-manifest.json',
10:39:07 PM: to: '/404.html',
10:39:07 PM: status: 404,
10:39:07 PM: force: true
10:39:07 PM: },
10:39:07 PM: { from: '/BUILD_ID', to: '/404.html', status: 404, force: true },
10:39:07 PM: {
10:39:07 PM: from: '/api',
10:39:07 PM: to: '/.netlify/functions/___netlify-handler',
10:39:07 PM: status: 200
10:39:07 PM: },
10:39:07 PM: {
10:39:07 PM: from: '/api/*',
10:39:07 PM: to: '/.netlify/functions/___netlify-handler',
10:39:07 PM: status: 200
10:39:07 PM: },
10:39:07 PM: {
10:39:07 PM: from: '/favicon.ico',
10:39:07 PM: to: '/favicon.ico',
10:39:07 PM: conditions: { Cookie: [Array] },
10:39:07 PM: status: 200
10:39:07 PM: },
10:39:07 PM: {
10:39:07 PM: from: '/icon.png',
10:39:07 PM: to: '/icon.png',
10:39:07 PM: conditions: { Cookie: [Array] },
10:39:07 PM: status: 200
10:39:07 PM: },
10:39:07 PM: {
10:39:07 PM: from: '/manifest.json',
10:39:07 PM: to: '/manifest.json',
10:39:07 PM: conditions: { Cookie: [Array] },
10:39:07 PM: status: 200
10:39:07 PM: },
10:39:07 PM: {
10:39:07 PM: from: '/on_error.png',
10:39:07 PM: to: '/on_error.png',
10:39:07 PM: conditions: { Cookie: [Array] },
10:39:07 PM: status: 200
10:39:07 PM: },
10:39:07 PM: {
10:39:07 PM: from: '/sw.js',
10:39:07 PM: to: '/sw.js',
10:39:07 PM: conditions: { Cookie: [Array] },
10:39:07 PM: status: 200
10:39:07 PM: },
10:39:07 PM: {
10:39:07 PM: from: '/workbox-22294e6b.js',
10:39:07 PM: to: '/workbox-22294e6b.js',
10:39:07 PM: conditions: { Cookie: [Array] },
10:39:07 PM: status: 200
10:39:07 PM: },
10:39:07 PM: {
10:39:07 PM: from: '/icons/icon-128x128.png',
10:39:07 PM: to: '/icons/icon-128x128.png',
10:39:07 PM: conditions: { Cookie: [Array] },
10:39:07 PM: status: 200
10:39:07 PM: },
10:39:07 PM: {
10:39:07 PM: from: '/icons/icon-144x144.png',
10:39:07 PM: to: '/icons/icon-144x144.png',
10:39:07 PM: conditions: { Cookie: [Array] },
10:39:07 PM: status: 200
10:39:07 PM: },
10:39:07 PM: {
10:39:07 PM: from: '/icons/icon-152x152.png',
10:39:07 PM: to: '/icons/icon-152x152.png',
10:39:07 PM: conditions: { Cookie: [Array] },
10:39:07 PM: status: 200
10:39:07 PM: },
10:39:07 PM: {
10:39:07 PM: from: '/icons/icon-16x16.png',
10:39:07 PM: to: '/icons/icon-16x16.png',
10:39:07 PM: conditions: { Cookie: [Array] },
10:39:07 PM: status: 200
10:39:07 PM: },
10:39:07 PM: {
10:39:07 PM: from: '/icons/icon-180x180.png',
10:39:07 PM: to: '/icons/icon-180x180.png',
10:39:07 PM: conditions: { Cookie: [Array] },
10:39:07 PM: status: 200
10:39:07 PM: },
10:39:07 PM: {
10:39:07 PM: from: '/icons/icon-192x192.png',
10:39:07 PM: to: '/icons/icon-192x192.png',
10:39:07 PM: conditions: { Cookie: [Array] },
10:39:07 PM: status: 200
10:39:07 PM: },
10:39:07 PM: {
10:39:07 PM: from: '/icons/icon-256x256.png',
10:39:07 PM: to: '/icons/icon-256x256.png',
10:39:07 PM: conditions: { Cookie: [Array] },
10:39:07 PM: status: 200
10:39:07 PM: },
10:39:07 PM: {
10:39:07 PM: from: '/icons/icon-32x32.png',
10:39:07 PM: to: '/icons/icon-32x32.png',
10:39:07 PM: conditions: { Cookie: [Array] },
10:39:07 PM: status: 200
10:39:07 PM: },
10:39:07 PM: {
10:39:07 PM: from: '/icons/icon-384x384.png',
10:39:07 PM: to: '/icons/icon-384x384.png',
10:39:07 PM: conditions: { Cookie: [Array] },
10:39:07 PM: status: 200
10:39:07 PM: },
10:39:07 PM: {
10:39:07 PM: from: '/icons/icon-512x512.png',
10:39:07 PM: to: '/icons/icon-512x512.png',
10:39:07 PM: conditions: { Cookie: [Array] },
10:39:07 PM: status: 200
10:39:07 PM: },
10:39:07 PM: {
10:39:07 PM: from: '/icons/icon-72x72.png',
10:39:07 PM: to: '/icons/icon-72x72.png',
10:39:07 PM: conditions: { Cookie: [Array] },
10:39:07 PM: status: 200
10:39:07 PM: },
10:39:07 PM: {
10:39:07 PM: from: '/icons/icon-96x96.png',
10:39:07 PM: to: '/icons/icon-96x96.png',
10:39:07 PM: conditions: { Cookie: [Array] },
10:39:07 PM: status: 200
10:39:07 PM: },
10:39:07 PM: {
10:39:07 PM: from: '/*',
10:39:07 PM: to: '/.netlify/functions/___netlify-handler',
10:39:07 PM: status: 200,
10:39:07 PM: conditions: { Cookie: [Array] },
10:39:07 PM: force: true
10:39:07 PM: },
10:39:07 PM: {
10:39:07 PM: from: '/_next/data/Qj5hDoLm6SONVv_50ql70/index.json',
10:39:07 PM: to: '/.netlify/builders/___netlify-odb-handler',
10:39:07 PM: status: 200,
10:39:07 PM: force: true
10:39:07 PM: },
10:39:07 PM: {
10:39:07 PM: from: '/',
10:39:07 PM: to: '/.netlify/builders/___netlify-odb-handler',
10:39:07 PM: status: 200,
10:39:07 PM: force: true
10:39:07 PM: },
10:39:07 PM: {
10:39:07 PM: from: '/*',
10:39:07 PM: to: '/.netlify/functions/___netlify-handler',
10:39:07 PM: status: 200
10:39:07 PM: }
10:39:07 PM: ].
10:39:07 PM:
10:39:07 PM: (@netlify/plugin-nextjs onBuild completed in 60ms)
10:39:07 PM:
10:39:07 PM: ────────────────────────────────────────────────────────────────
10:39:07 PM: 4. Functions bundling
10:39:07 PM: ────────────────────────────────────────────────────────────────
10:39:07 PM:
10:39:07 PM: Packaging Functions from .netlify/functions-internal directory:
10:39:07 PM: - ___netlify-handler/___netlify-handler.js
10:39:07 PM: - ___netlify-odb-handler/___netlify-odb-handler.js
10:39:07 PM: - _ipx/_ipx.js
10:39:07 PM:
10:39:28 PM:
10:39:28 PM: (Functions bundling completed in 21.1s)
10:39:28 PM:
10:39:28 PM: ────────────────────────────────────────────────────────────────
10:39:28 PM: 5. @netlify/plugin-nextjs (onPostBuild event)
10:39:28 PM: ────────────────────────────────────────────────────────────────
10:39:28 PM:
10:39:28 PM: Next.js cache saved.
10:39:28 PM:
10:39:28 PM: (@netlify/plugin-nextjs onPostBuild completed in 56ms)
10:39:28 PM:
10:39:28 PM: ────────────────────────────────────────────────────────────────
10:39:28 PM: 6. Deploy site
10:39:28 PM: ────────────────────────────────────────────────────────────────
10:39:28 PM:
10:39:28 PM: Starting to deploy site from '.next'
10:39:28 PM: Creating deploy tree
10:39:28 PM: Creating deploy upload records
10:39:29 PM: 22 new files to upload
10:39:29 PM: 3 new functions to upload
10:39:37 PM: Site deploy was successfully initiated
10:39:37 PM:
10:39:37 PM: (Deploy site completed in 8.5s)
10:39:37 PM: Starting post processing
10:39:37 PM:
10:39:37 PM: ────────────────────────────────────────────────────────────────
10:39:37 PM: Netlify Build Complete
10:39:37 PM: ────────────────────────────────────────────────────────────────
10:39:37 PM:
10:39:37 PM: (Netlify Build completed in 1m 2.2s)
10:39:37 PM: Post processing - HTML
10:39:37 PM: Caching artifacts
10:39:37 PM: Started saving node modules
10:39:37 PM: Finished saving node modules
10:39:37 PM: Started saving build plugins
10:39:37 PM: Finished saving build plugins
10:39:37 PM: Started saving yarn cache
10:39:37 PM: Post processing - header rules
10:39:37 PM: Post processing - redirect rules
10:39:38 PM: Post processing done
10:39:38 PM: Site is live ✨
10:39:41 PM: Finished saving yarn cache
10:39:41 PM: Started saving pip cache
10:39:41 PM: Finished saving pip cache
10:39:41 PM: Started saving emacs cask dependencies
10:39:41 PM: Finished saving emacs cask dependencies
10:39:41 PM: Started saving maven dependencies
10:39:41 PM: Finished saving maven dependencies
10:39:41 PM: Started saving boot dependencies
10:39:41 PM: Finished saving boot dependencies
10:39:41 PM: Started saving rust rustup cache
10:39:41 PM: Finished saving rust rustup cache
10:39:41 PM: Started saving go dependencies
10:39:41 PM: Finished saving go dependencies
10:39:41 PM: Build script success
10:40:57 PM: Finished processing build request in 2m57.84385971s
Function logs
Function logs
# Paste logs here
.next JSON files
generated .next JSON files
# Paste file contents here. Please check there isn't any private info in them
# You can either build locally, or download the deploy from Netlify by clicking the arrow next to the deploy time.