index 404 not found - Githubissues

Describe the bug

Index not found 404 on page load

Actual behavior

On website load/reload, App renders the complete layout with nav bar and footer but index page ('/') is not found. When clicking in the Home ('/') link in the nav bar, the index is found and page loads correctly. There is no error reloading pages other than '/'.

Expected behavior

Index is rendered.

Steps to reproduce

File structure is as follows:

/pages

/404/index.tsx
/category/[id].tsx
/section/[id].tsx
_app.tsx
_document.tsx
_error.tsx
index.tsx <= not found on first load.

All pages have getServerSideProps, including pages/index.tsx

Screenshots/Code/Logs

Cloudfront log on page load: 2021-01-04 14:13:57 GET cloudfront.net / 404 - Mozilla/5.0%20(Windows%20NT%2010.0;%20Win64;%20x64)%20AppleWebKit/537.36%20(KHTML,%20like%20Gecko)%20Chrome/87.0.4280.88%20Safari/537.36 - - Error N8oJ_zl2gxnHbFEHfkayx8VClBbwmQ5yrombR9LVirJoe0X5LHnAWA== domain.com https 1492 0.103 - TLSv1.3 TLS_AES_128_GCM_SHA256 Error HTTP/1.1 - - 56521 0.103 Error text/html - - -

Cloudfront log on Home click: 2021-01-04 14:13:59 GET cloudfront.net /_next/static/chunks/pages/index-d2b913f9934e0803151f.js 200 https://domain.com/ Mozilla/5.0%20(Windows%20NT%2010.0;%20Win64;%20x64)%20AppleWebKit/537.36%20(KHTML,%20like%20Gecko)%20Chrome/87.0.4280.88%20Safari/537.36 - - Hit VpKpXjNuMuCKvB-urbfb2xJNyJRKLlfNzL9BzAdMA64mhUFDeptUEw== domain.com https 1443 0.002 - TLSv1.3 TLS_AES_128_GCM_SHA256 Hit HTTP/1.1 - - 25860 0.002 Hit application/javascript - - -

serverless.yaml

Website:
  component: '@sls-next/serverless-component@1.19.0-alpha.22'
  inputs:
    name: '#{ENVIRONMENT}#-website'
    build:
      env:
        API_URL: '#{API_URL}#'
        COGNITO_IDENTITY_POOL_ID: '#{COGNITO_IDENTITY_POOL_ID}#'
        COGNITO_IDENTITY_POOL_REGION: '#{COGNITO_IDENTITY_POOL_REGION}#'
        COGNITO_REGION: '#{COGNITO_REGION}#'
        COGNITO_USER_POOL_ID: '#{COGNITO_USER_POOL_ID}#'
        COGNITO_USER_POOL_WEB_CLIENT_ID: '#{COGNITO_USER_POOL_WEB_CLIENT_ID}#'
        COGNITO_USER_POOL_DOMAIN: '#{COGNITO_USER_POOL_DOMAIN}#'
        COGNITO_REDIRECT_SIGN_IN: '#{COGNITO_REDIRECT_SIGN_IN}#'
        COGNITO_REDIRECT_SIGN_OUT: '#{COGNITO_REDIRECT_SIGN_OUT}#'
        GOOGLE_TAG_MANAGER_ID: '#{GOOGLE_TAG_MANAGER_ID}#'
        GOOGLE_ANALYTICS_ID: '#{GOOGLE_ANALYTICS_ID}#'
        DIDOMI_API_KEY: '#{DIDOMI_API_KEY}#'
    domain: ['#{ENVIRONMENT}#', 'domain.com'] # [ sub-domain, domain ]
    bucketRegion: '#{CURRENT_REGION}#'
    bucketName: '#{ENVIRONMENT}#-website-front-#{CURRENT_REGION}#'
    cloudfront:
      distributionId: '#{DISTRIBUTION_ID}#' #optional
      # webACLId: '#{WEB_ACL_ID}#' # ARN of WAF
      originAccessIdentityId: '#{ORIGIN_ACCESS_IDENTITY_ID}#'
      aliases: ['#{ENVIRONMENT}#.domain.com']
      origins:
        - url: https://#{ENVIRONMENT}#-website-bo-front-#{CURRENT_REGION}#-s3.amazonaws.com/public
          pathPatterns:
            /images/*:
              defaultTTL: 86400
              maxTTL: 31536000
              minTTL: 0
              allowedHttpMethods: [GET, HEAD]
              compress: true
              forward:
                queryString: true
              viewerProtocolPolicy: 'redirect-to-https'
        - url: https://#{ENVIRONMENT}#-video-output-#{CURRENT_REGION}#-s3.amazonaws.com
          pathPatterns:
            /videos/*:
              defaultTTL: 86400
              maxTTL: 31536000
              minTTL: 0
              allowedHttpMethods: [GET, HEAD]
              compress: true
              forward:
                queryString: true
              viewerProtocolPolicy: 'redirect-to-https'

Versions

OS/Environment: All
@sls-next/serverless-component version: @sls-next/serverless-component@1.19.0-alpha.22
Next.js version: 10.0.4

Additional context

Checklist

[x] You have reviewed the README and FAQs, which answers several common questions.
[x] Please first try using the most recent latest or alpha @sls-next/serverless-component release version, which may have already fixed your issue or implemented the feature you are trying to use. Note that the old serverless-next.js component and the serverless-next.js plugin are deprecated and no longer maintained.

Hello,

I tried to deploy the startup project of create-next-app and I have the same issue.

there is a redirection to 404 on the root page.

Regards

This is strange, there are e2e tests that test the index page is working using getServerSideProps: https://github.com/serverless-nextjs/serverless-next.js/blob/e04b4b458e3cf737fae2331bdd4c01c400218372/packages/e2e-tests/next-app/pages/index.tsx#L19-L25. (The same applies for apps with a basePath set).

Is anyone able to post contents of the .serverless_nextjs directory. In particular, all of the manifest, prerender-manifest, and route-manifest JSON files in default-lambda.

For example manifest.json shows that the / route maps to pages/index.js:

{
  "buildId": "uFEbgPwZibZrkgpRq1wMT",
  "logLambdaExecutionTimes": false,
  "pages": {
    "ssr": {
      "dynamic": {},
      "nonDynamic": {
        "/errored-page-new-ssr": "pages/errored-page-new-ssr.js",
        "/errored-page": "pages/errored-page.js",
        "/image-component": "pages/image-component.js",
        "/": "pages/index.js",
        "/ssg-page": "pages/ssg-page.js",
        "/ssr-page": "pages/ssr-page.js",
        "/_error": "pages/_error.js"
      }
    },
    "html": { "dynamic": {}, "nonDynamic": { "/404": "pages/404.html" } }
  },
  "publicFiles": { "/app-store-badge.png": "app-store-badge.png" },
  "trailingSlash": false,
  "domainRedirects": {},
  "enableHTTPCompression": false
}

And it will be helpful to post the default-lambda/index.js file (non-minified) so I can verify it's using the right code.

For default next app : Manifest.json

{
 "pages": {
  "ssr": {
   "nonDynamic": {
    "/_app": "pages/_app.js",
    "/_document": "pages/_document.js",
    "/_error": "pages/_error.js"
   },
   "dynamic": {}
  },
  "html": {
   "nonDynamic": {
    "/": "pages/index.html",
    "/index": "pages/index.html",
    "/404": "pages/404.html"
   },
   "dynamic": {}
  }
 },
 "buildId": "KsG4TNZKOSKiPLExoPDLA",
 "enableHTTPCompression": false,
 "trailingSlash": false,
 "domainRedirects": {},
 "logLambdaExecutionTimes": false,
 "publicFiles": {
  "/favicon.ico": "favicon.ico",
  "/vercel.svg": "vercel.svg"
 }
}

PreRender-Manifest:

{
 "version": 2,
 "routes": {},
 "dynamicRoutes": {},
 "preview": {
  "previewModeEncryptionKey": "73cf8af926322da668fd11dd09fd3af2d74724915a70d3cfc4e3c99507ae2b3b",
  "previewModeSigningKey": "62cd60a7579a9be310f086773136a1f70e546b29f082d5bda094b9020ec84ad8",
  "previewModeId": "aeb19ff2f30231b3efdb93639045fb79"
 }
}

route manifest:

{
 "rewrites": [],
 "pages404": true,
 "basePath": "",
 "version": 1,
 "redirects": [],
 "dynamicRoutes": [],
 "headers": []
}

For the app : Manifest :

{
 "pages": {
  "ssr": {
   "nonDynamic": {
    "/": "pages/index.js",
    "/_error": "pages/_error.js"
   },
   "dynamic": {
    "/rubrique/:id/:name": {
     "file": "pages/rubrique/[id]/[name].js",
     "regex": "^\\/rubrique(?:\\/([^\\/#\\?]+?))(?:\\/([^\\/#\\?]+?))[\\/#\\?]?$"
    },
    "/categorie/:id/:name": {
     "file": "pages/categorie/[id]/[name].js",
     "regex": "^\\/categorie(?:\\/([^\\/#\\?]+?))(?:\\/([^\\/#\\?]+?))[\\/#\\?]?$"
    },
    "/video/:params*": {
     "file": "pages/video/[...params].js",
     "regex": "^\\/video(?:\\/((?:[^\\/#\\?]+?)(?:\\/(?:[^\\/#\\?]+?))*))?[\\/#\\?]?$"
    }
   }
  },
  "html": {
   "nonDynamic": {
    "/plan-du-site": "pages/plan-du-site.html",
    "/a-propos": "pages/a-propos.html",
    "/profil": "pages/profil.html",
    "/inscription": "pages/inscription.html",
    "/mentions-legales": "pages/mentions-legales.html",
    "/contact": "pages/contact.html",
    "/404": "pages/404.html"
   },
   "dynamic": {}
  }
 },
 "buildId": "shwHXP_BWl0NX0ytFZSvg",
 "enableHTTPCompression": false,
 "trailingSlash": false,
 "domainRedirects": {},
 "logLambdaExecutionTimes": false,
 "publicFiles": {
  "/fonts/Axiforma-MediumItalic.woff2": "fonts/Axiforma-MediumItalic.woff2",
  "/fonts/Axiforma-Thin.woff2": "fonts/Axiforma-Thin.woff2",
  "/fonts/Axiforma-Light.woff2": "fonts/Axiforma-Light.woff2",
  "/fonts/Axiforma-Black.woff2": "fonts/Axiforma-Black.woff2",
  "/fonts/Axiforma-Regular.woff2": "fonts/Axiforma-Regular.woff2",
  "/favicon-16x16.png": "favicon-16x16.png",
  "/fonts/Axiforma-HeavyItalic.woff2": "fonts/Axiforma-HeavyItalic.woff2",
  "/fonts/Axiforma-SemiBold.woff2": "fonts/Axiforma-SemiBold.woff2",
  "/fonts/Axiforma-BoldItalic.woff2": "fonts/Axiforma-BoldItalic.woff2",
  "/android-chrome-512x512.png": "android-chrome-512x512.png",
  "/fonts/Axiforma-Heavy.woff2": "fonts/Axiforma-Heavy.woff2",
  "/fonts/Axiforma-ExtraBoldItalic.woff2": "fonts/Axiforma-ExtraBoldItalic.woff2",
  "/fonts/Axiforma-Book.woff2": "fonts/Axiforma-Book.woff2",
  "/fonts/Axiforma-LightItalic.woff2": "fonts/Axiforma-LightItalic.woff2",
  "/fonts/Axiforma-Medium.woff2": "fonts/Axiforma-Medium.woff2",
  "/fonts/Axiforma-BookItalic.woff2": "fonts/Axiforma-BookItalic.woff2",
  "/fonts/Axiforma-ExtraBold.woff2": "fonts/Axiforma-ExtraBold.woff2",
  "/fonts/Axiforma-Bold.woff2": "fonts/Axiforma-Bold.woff2",
  "/fonts/Axiforma-SemiBoldItalic.woff2": "fonts/Axiforma-SemiBoldItalic.woff2",
  "/favicon-32x32.png": "favicon-32x32.png",
  "/favicon.ico": "favicon.ico",
  "/fonts/Axiforma-ThinItalic.woff2": "fonts/Axiforma-ThinItalic.woff2",
  "/fonts/Axiforma-Italic.woff2": "fonts/Axiforma-Italic.woff2",
  "/android-chrome-192x192.png": "android-chrome-192x192.png",
  "/apple-touch-icon.png": "apple-touch-icon.png",
  "/fonts/Axiforma-BlackItalic.woff2": "fonts/Axiforma-BlackItalic.woff2"
 }
}

Prerender manifest :

{
 "version": 2,
 "routes": {},
 "dynamicRoutes": {},
 "notFoundRoutes": [],
 "preview": {
  "previewModeEncryptionKey": "128b737f921b7fe12d7035794945e8d09613d3753a29ea5aecb1944dd89fe751",
  "previewModeSigningKey": "297a7dad2072033ee5a656928a194a8a70b39969d536bacd3bdab43ddb48aa86",
  "previewModeId": "115ba2ff614da4e02aac182215fd5f2a"
 }
}

Route manifest :

{
 "rewrites": [],
 "pages404": true,
 "basePath": "",
 "version": 3,
 "dataRoutes": [
  {
   "dataRouteRegex": "^/_next/data/shwHXP_BWl0NX0ytFZSvg/index.json$",
   "page": "/"
  },{
   "namedDataRouteRegex": "^/_next/data/shwHXP_BWl0NX0ytFZSvg/categorie/(?<id>[^/]+?)/(?<name>[^/]+?)\\.json$",
   "dataRouteRegex": "^/_next/data/shwHXP_BWl0NX0ytFZSvg/categorie/([^/]+?)/([^/]+?)\\.json$",
   "page": "/categorie/[id]/[name]",
   "routeKeys": {
    "id": "id",
    "name": "name"
   }
  },{
   "namedDataRouteRegex": "^/_next/data/shwHXP_BWl0NX0ytFZSvg/rubrique/(?<id>[^/]+?)/(?<name>[^/]+?)\\.json$",
   "dataRouteRegex": "^/_next/data/shwHXP_BWl0NX0ytFZSvg/rubrique/([^/]+?)/([^/]+?)\\.json$",
   "page": "/rubrique/[id]/[name]",
   "routeKeys": {
    "id": "id",
    "name": "name"
   }
  },{
   "namedDataRouteRegex": "^/_next/data/shwHXP_BWl0NX0ytFZSvg/video/(?<params>.+?)\\.json$",
   "dataRouteRegex": "^/_next/data/shwHXP_BWl0NX0ytFZSvg/video/(.+?)\\.json$",
   "page": "/video/[...params]",
   "routeKeys": {
    "params": "params"
   }
  }],
 "redirects": [],
 "dynamicRoutes": [
  {
   "namedRegex": "^/categorie/(?<id>[^/]+?)/(?<name>[^/]+?)(?:/)?$",
   "page": "/categorie/[id]/[name]",
   "routeKeys": {
    "id": "id",
    "name": "name"
   },
   "regex": "^/categorie/([^/]+?)/([^/]+?)(?:/)?$"
  },{
   "namedRegex": "^/rubrique/(?<id>[^/]+?)/(?<name>[^/]+?)(?:/)?$",
   "page": "/rubrique/[id]/[name]",
   "routeKeys": {
    "id": "id",
    "name": "name"
   },
   "regex": "^/rubrique/([^/]+?)/([^/]+?)(?:/)?$"
  },{
   "namedRegex": "^/video/(?<params>.+?)(?:/)?$",
   "page": "/video/[...params]",
   "routeKeys": {
    "params": "params"
   },
   "regex": "^/video/(.+?)(?:/)?$"
  }],
 "headers": []
}

I add the index.js file with txt extension.

index.txt

Regards

Hi,

We found the solution. We create the cloudfront and there is a default root object : index.html. When I remove it, it works.

Sorry for the issue.

You can close it.

serverless-nextjs / serverless-next.js

index 404 not found #861