serverless-nextjs/serverless-next.js

Question - Plans for next v9

romainquellec opened this issue · 19 comments

romainquellec commented

Hello !

What is you plan about :

  • Dynamic Routing
  • API Routes
  • Automatic Static Optimization

These are great improvements in the next environment ! I don't know what is your vision @danielcondemarin on this and how this plugin should handle theses features/improvements.

Thanks.

danielcondemarin commented

Hello! Sorry, been very busy lately but definitely Next 9 support will be coming.

Find the Dynamic Routing Proposal here: #105.

API Routes and Automatic Static Optimisation is also really cool stuff I'll be creating some proposals for over the next few weeks 👍

Vadorequest commented

Is Next v9 compatible with the current version of this plugin? Even if all features aren't supported yet.

danielcondemarin commented

Is Next v9 compatible with the current version of this plugin? Even if all features aren't supported yet.

It's probably not compatible, although I haven't tried it.
This plugin relies on next's build output which has changed. For example, built pages being outputted as html when they don't use getInitialProps (aka Automatic Static Optimisation).

aygee commented

Not compatible. I just tried it :)

  • 👍3
danielcondemarin commented

Raised another RFC for automatic static optimisation, #107

aygee commented

Not compatible. I just tried it :)

UPDATE: I should clarify that I managed to get this working Next v9 without much effort. I got an error earlier but it was due to misconfiguration on my part.

I haven't got dynamic routing in my project - I don't think it will work out of the box as discussed in this thread.

jishaal commented

@aygee How did you get it working?

I get the following error

Serverless plugin "serverless-nextjs-plugin" initialization errored: Cannot read property 'serverless-nextjs' of undefined
aygee commented

@jishaal I also had that error before but managed to get rid of it eventually after trying few different things, but I don't know what fixed it. What is your version of serverless? Mine is 1.41.1. Did you use yarn or npm? (I used yarn) maybe try to delete node_modules folder and do another yarn install

jishaal commented

Adding the below to serverless.yml fixed it, using 1.48.2. Using npm

custom:
  serverless-nextjs: {}

Manages to push the stack out to AWS now, but having issues when hitting the endpoints, I am guessing because it cannot handle the static html files with Automatic Static Optimization? I need to investigate further, would love to somehow get it working!

aygee commented

@jishaal good point, I think it's expecting that key in the serverless.yml

For static files, they need to be hosted somewhere else, because aws lambda won't be able to serve the static files. You can follow the instruction how to host the static files in s3: https://github.com/danielcondemarin/serverless-nextjs-plugin#hosting-static-assets

jishaal commented

For static files, they need to be hosted somewhere else

Hmm I got this and I believe this is working fine for things like images/script etc for me ie. bucket gets created and these files end up there. What I think the issue is that due to Automatic Static Optimization, if a route does not have getInitialProps, it gets prerendered as a HTML file. This is a static asset but what I don't understand is how do I get this to the static asset bucket and have the lambda return this?

If getInitialProps is absent, Next.js will statically optimize your page automatically by prerendering it to static HTML. ...next build will emit .html files for statically optimized pages. The result will be a file named .next/server/static/${BUILD_ID}/about.html instead of .next/server/static/${BUILD_ID}/about.js. This behavior is similar for target: 'serverless'.

https://github.com/zeit/next.js/#automatic-prerendering

Currently the lambda gets uploaded the html file and a weird related js file and its all falls apart

// index.html
  const page = require("./index.html.original.js");
  const handlerFactory = require("next-aws-lambda");

  module.exports.render = (event, context, callback) => {
    const handler = handlerFactory(page);
    handler(event, context, callback);
  };

and the file it references

// index.html.original.js, has the static html in this
<!DOCTYPE html><html><head><title>....
jishaal commented

FYI I got around this by adding a noop getInitialProps to each of my pages so stop automatic-prerendering. Hacky but works for now

e.g. IndexPage.getInitialProps = () => ({ blah: 'blah' });

  • 👍3
mattdell commented

I missed this thread, but raised one for API Routes over at #116

  • 👍1
johhansantana commented

@mattdell what version of next@8 does it support api routes? I'm trying to upload latest "next": "8.1.1-canary.70" but I am getting a "message": "Internal server error" when I try to access the index page. This happens with next@9 as well but I have some api endpoints that I need to use.

aygee commented

@johhansantana Have you checked your server log?

johhansantana commented

@aygee I think it's this error Cannot find module './sls-next-build/index.js not sure how to fix this though :(

mattdell commented

@johhansantana read through #123 as I had the exact same problem

You need

  • Next 9.0.4
  • AWS Lambda on version 10
  • 👍2
johhansantana commented

Got it! The only problem now are the assets aren't being loaded because of the url stage suffix. I guess this is fixed when you put your custom domain?

danielcondemarin commented

I have recently released https://github.com/danielcondemarin/serverless-next.js/tree/master/packages/serverless-nextjs-component which targets nextjs 9.0 and has full feature parity. Please check it out.
In terms of the next-plugin I believe next 9 support is nearly there but might take some time before is fully complete.

  • 👍2