Proper usage with Next.js on custom server

xlukasfrana

last year

1 2

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

<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

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

      return config
    },
  },
})

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

• Selected Answer
  

  xlukasfrana

  last month

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

• 

  Ramos159

  last year

  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

  3 replies
  

  xlukasfrana

  last year

  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

  Payload Team

  last year

  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.

  

  xlukasfrana

  last year

  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.