Next.js 11 on AWS Amplify - Preview not working

Developing with Prismic
1

Hi,

We recently deployed a Next.js 11 app on AWS Amplify. Preview is working fine from Prismic on http://localhost:3000

We have followed the steps here: Previews with Next.js - Prismic

We have configured the Link Resolver in Prismic to point to /api/preview

When we preview on the live URL we are seeing a Cloudfront error for all pages.

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. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.
If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.

Generated by cloudfront (CloudFront)

Is anyone else using AWS Amplify with Nextjs 11?

As we are using Amplify we haven't set any permissions on the lambda functions as this is all done automatically by AWS.

Thanks,

Patrick

3

Hi Patrick,

I haven't tried deploying this to Amplify yet, but I can try and help you with this.

How is your project deployed on Amplify, is it static or SSR?

Thanks.

4

Hi Phil,

Thanks for your reply. It's SSG at the moment.

Thanks,
Silviu

5

Can you share with me your link resolver?

6

export const linkResolver = doc => {
if (doc?.type === 'page') {
return /${doc?.uid};
} else if (doc?.type === 'post') {
return /blog/${doc?.uid};
} else if (doc?.url) {
return doc.url;
}
return '';
};

7

So doc.url isn't an accessible property for the link resolver. Can you try the link resolver below?

export const linkResolver = (doc) => {
  if (doc.isBroken) {
    return '/not-found'
  }
  if (doc.type === 'page') {
    return `/${doc.uid}`
  }
  if (doc.type === 'post') {
    return `/blog/${doc.uid}`
  }
  return '/'
}
8

Although I think this probably won't resolve your problem since it's a 503 ERROR and the preview is working locally.

My feeling is that this is probably because your app is SSG only and the Next.js preview mode requires the app to be able to run to build the page, so maybe a hybrid app might work:
https://docs.amplify.aws/guides/hosting/nextjs/q/platform/js/#deploy-and-host-a-hybrid-app-ssg-and-ssr

Have you considered hosting your app on Vercel? It's always the easiest way to host Next.js projects and your previews will work out of the box:

9

Thanks for your reply Phil.

Yeah, I don't think the problem is caused by 'doc.url', it should not even reach that code for previews. Anyway, it's worth trying.

We'll have a look at the hybrid app and hosting an environment on Vercel. If in the meantime you'll find anything else, please let us know.

Thanks,
Silviu

1 Like
10

Tried using the linkResolver you suggested, but we're still facing the same issue.

11

Yeah, I think the option will be to build it as a hybrid or the easiest option is to deploy on vercel.

12

Thanks Phil. We deployed a Hybrid version on Amplify but still the same problem.

It is running as SSR on Amplify but we are pre-building the pages.

We had not planned to deploy to Vercel as we are running all our services on AWS.

Is there no way to get this working with Amplify that you would recommend?

13

Unfortunately, I don't have any experience with Amplify, although it seems like an issue related to triggering Next.js's preview mode on AWS.

There's some information about these /api routes here, but I'm not sure if it helps:

  • /api : Another key feature that Next.js offers is API routes. Any file inside the folder pages/api is mapped to /api/* and will be treated as an API endpoint instead of a page. The default app comes with pages/api/hello.js that provides an API route. You can use this API to interface with any backend service to fetch data.

Hopefully, this article helps to explain how to trigger /api routes.

14

ok thanks. will look into this further

1 Like
15

Threads close after a period of inactivity. Flag this thread to re-open it and continue the conversation.