Proper usage with Next.js on custom server

[thefrana]

Hi,
I was primarily inspired by this repo payloadcms/nextjs-custom-server. However, I found there are a few things I do not know what to do with. I am writing this, because I've seen this approach a lot on GitHub, so it affects many users.

1. From Next.js 12.2, the swc is the primarily compiler and it is much faster. From what I understand, the way the repo is configured does not use it and uses Babel instead. How can I enable it?

• the dev build takes too long for a fairly simple projects. The server start in about 10s on AMD Ryzen 7 5800H, which is quite fast CPU.

2. Will payload switch to vite or swc for compilation? The webpack itself is slow and now it is possible to start server in no time

3. I am seeing this log message

• [BABEL] Note: The code generator has deoptimised the styling of <path-to-project>/.next/server/pages/_app.js as it exceeds the max of 500KB.
• it is only annoying, but it does not break anything
• it should be solved by

require('@babel/register')({
 presets: ['next/babel'],
 extensions: ['.ts', '.tsx', '.js', '.jsx'],
 env: {
   development: {
     sourceMaps: 'inline',
     retainLines: true,
     compact: true, // this line
   },
 },
})

4. Webpack from payload throws warnings

<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: No serializer registered for ConcatSource
<w> while serializing webpack/lib/util/registerExternalSerializer.webpack-sources/ConcatSource -> Array { 2 items } -> ConcatSource

• it can be solved by surpressing all warnings

export default buildConfig({
  admin: {
    // this function
    webpack: (config) => {
      config.infrastructureLogging = {
        level: 'error',
      }

      return config
    },
  },
})

5. Next.js images are not working

• yes, I think there are collisions between Payload sharp and Next.js sharp. However, if I use Next.js Image component (I am using next/future/image), it crashes the server. When I use plain img tags, it works like a charm. The log message is as follows

node: symbol lookup error: .../node_modules/sharp/build/Release/sharp-linux-x64.node: undefined symbol: vips_fail_on_get_type
 ELIFECYCLE  Command failed.

[Ramos159]

PayloadCMS is something you run on TOP of Express. What you can do is start with a typescript next app using swc by default using npx create-next-app@latest --typescript then follow instructions here to use a custom server for NextJS (be wary they use a plain http server here) + use documentation from PayloadCMS here to instantiate it in an exisiting project.

You can then copy over payload config files, get rid of babel config code, copy files for blocks,collections and components over to have those as well.

Also next/future/image is experimental. have you tried using the stable version at next/image?

edit: it dawned on me that you could probably just remove babel configs more easily than the above. you could try just removing babel config in next configs since next will only use babel if specified.

edit2: it's payload's admin panel that uses webpack, not sure what we can do about it here

[thefrana]

I tried it. I can easily get off Babel config and the whole dev.js. Thinking about creating a PR. However, how can I verify that I use SWC? The server still starts in about 10 seconds, but it starts that long even when using next dev and skipping Payload alltogether. I gonna dig deeper into that and somehow verify that I use really use SWC.

I think next/image is not usable right now. It has several drawbacks and I cannot use it in my projects. That's what probably inspired Next.js team to create a new version next/future/image.

edit2: it's payload's admin panel that uses webpack, not sure what we can do about it here

This should be addressed in the future. Modern projects are using esbuild or swc. I am sure the Payload team is working on something similar.

Thank you for your answer!

[denolfe]

As of now, Payload leverages webpack in order to split up the config into front-end and back-end configs. We'd have to do some investigation in regards to replacing it with another tool - this would be a rather large breaking change either way since we currently support extending Payload's webpack config via the admin.webpack config value.

[thefrana]

If I understand swc correctly, it replaces Babel and tsc, but it can run under webpack. More info can be found here: https://swc.rs/. It may be a much faster alternative to current setup. BTW, ts-node now also supports compilation through swc via --swc flag.

[thefrana]

I think this is not relevant anymore. Now, we have new way of integrating with Next.