index 404 not found

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

• You have reviewed the README and FAQs, which answers several common questions.
• 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.

[L-Luciano]

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.

[L-Luciano]

I add the index.js file with txt extension.

index.txt

Regards