@dphang all's good for me in production , but

[johnaxe]

@dphang I'm currently using the latest alpha @sls-next/serverless-component@1.19.0-alpha.32. At build time, all SSG files are created as expected and ends up in .next/serverless directory locally but they're not copied to S3. Will you be addressing this issue? Is there a way in which I can issue a custom script during the build which cpoies the generated files to S3?

[dphang]

Please add the Next.js version and more information about your project structure

[johnaxe]

@dphang

• next v10.0.7
• @sls-next/serverless-component@1.19.0-alpha.32

My pages are a mix of SSG / SSR. The app is basically fetching pages and posts from Storyblok. There is also a products section with a optional catch-all but that works fine since it uses getServerSideProps().

Pages

• index.js (SSG) - problem
• shop
  • [slug].js (SSG) - problem
• products
  • [[...tree]].js (SSR) - no problem here

After deploy, in S3 bucket:

_next/data has not been created
static-pages/{buildId}/:

• en/
  • 404.html
  • shop/
    • [slug].html
• sv/
  • 404.html
  • shop/
    • [slug].html

If I initially enter the URLs to the problematic pages directly in the address bar and hit Enter, two different errors occur:

domain.com/ & domain.com/sv

<Error>
    <Code>AccessDenied</Code>
    <Message>Access Denied</Message>
    <RequestId>F52CE8031F8864BD</RequestId>
    <HostId>oI9+PZneF1g3u3x/YcPJ4feL5dB7D0QBjFnrSvCeaWOHqjSvtXaYldhAs+SNfHzVDUjfSR3E424=</HostId>
</Error>

domain.com/shop/* & domain.com/sv/shop/*

503 ERROR

The request could not be satisfied.
The Lambda function associated with the CloudFront distribution is invalid or doesn't have the required permissions....

If I enter the URL to one of the working pages (i.e. products/, they're the only ones working initially), and navigate inline (using locale switcher with next/link) to /sv and then back to / (default locale) all the SSG dynamic routes pages are created in S3 bucket (the navlinks are present in index.js) and the site works perfectly from there.

Some code excerpts

//serverless.yml
projName:
    component: "@sls-next/serverless-component@1.19.0-alpha.32"
    inputs:
        domain: ["mydomain.com"]
        bucketName: bucketXX
        name:
            defaultLambda: FooDefault
            apiLambda: FooApi
            imageLambda: FooImage
        cloudfront:
            distributionId: XXXXXXXXXXXX

//next.config.js
module.exports = {
    i18n: {
        locales: ["en", "sv"],
        defaultLocale: "en",
        localeDetection: false,
    },
};

//index.js
export async function getStaticProps({ locale }) {
    let language = locale !== "en" ? `/${locale}` : "";

    let res = await StoryblokService.get(`cdn/stories${language}/home`);
    return {
        props: {
            content: res.data.story.content,
            title: res.data.story.name,
            locale: locale,
        },
    };
}

// /shop/[slug].js
export async function getStaticPaths({ locales }) {
    return getAllPostsWithSlug(locales);
}

export async function getStaticProps({ locale, params: { slug } }) {
    let language = locale !== "en" ? `${locale}/` : "";
    const res = await StoryblokService.get(
        `cdn/stories/${language}shop/${slug}`
    );
    return {
        props: {
            content: res.data.story.content,
            slug: slug,
            title: res.data.story.name,
            locale: locale,
        },
        revalidate: 10,
    };
}

> serverless --debug

DEBUG ─ Resolving the template's static variables.
DEBUG ─ Collecting components from the template.
DEBUG ─ Downloading any NPM components found in the template.
DEBUG ─ Analyzing the template's components dependencies.
DEBUG ─ Creating the template's components graph.
DEBUG ─ Syncing template state.
DEBUG ─ Executing the template's components graph.
...
info  - Creating an optimized production build...
info  - Collecting page data...
info  - Generating static pages (0/18)
info  - Generating static pages (4/18)
info  - Generating static pages (8/18)
info  - Generating static pages (13/18)
info  - Generating static pages (18/18)
info  - Finalizing page optimization...

Page                                                           Size     First Load JS
┌ ● /                                                          2.4 kB          154 kB
├   /_app                                                      0 B            74.6 kB
├ ○ /404                                                       2.77 kB        77.4 kB
├ λ /products/[[...tree]]                                      16.4 kB         147 kB
├ λ /shop                                                      436 B           129 kB
└ ● /shop/[slug]                                               3.6 kB          156 kB
    ├ /en/shop/instagram
    ├ /en/shop/post-2
    ├ /en/shop/slider-in-blog
    └ [+5 more paths]
λ  (Lambda)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
   (ISR)     incremental static regeneration (uses revalidate in getStaticProps)

[dphang]

Looks like you are using locales? I had a fix yesterday in 1.19-alpha.33 to handle locales properly in newer Next 10 versions (e.g 10.0.7) since Next.js changed the structure of the prerender manifest (it now has routes for all locale paths, previously we had to generate it ourselves), maybe that will help? Before this fix, SSG pages weren't copied correctly if you had multiple locales. This could explain why SSG pages are not working but SSR pages are?

Possibly related: #907

[johnaxe]

Working perfectly with 1.19-alpha.33. Thank you! The most awesome npm package I ever saw is now even more awesome! Thank you for you effort.