404 when changing /admin route on refresh or direct navigation

gregwhitworthlast year

11

• 

  imcorfitzlast year

  https://giphy.com/gifs/made-by-me-the-it-crowd-FspLvJQlQACXu
  

  
  

  Just curious if you have tried to stop the server and start again?

• 

  gregwhitworthlast year

  When you say stop, I've started/restarted in various environments both locally and in test on my host to no avail

  
  

  
  

  but good choice of meme

• 

  imcorfitzlast year

  Are you running a payload on express or serverlessly using next-payload?

• 

  gregwhitworthlast year

  I'm using next-payload

• 

  imcorfitzlast year

  How have you managed the routing in your next.config file?

  
  

  
  

  the

  withPayload

  wrapper proxies all

  /admin/*

  calls to payload, so you may have to manually add this configuration to next.config to make it work

• 

  gregwhitworthlast year

  In

  _app.tsx

  I have this:

  
  
  const PayloadApp = (appProps: FullAppProps) => { const { Component, pageProps } = appProps; const { settings } = pageProps; const router = useRouter(); if (router.pathname === '/admin') { return <Component {...pageProps} />; } ...
  
  

  Additionally under the next

  pages

  I have an

  account

  folder (or admin currently since that works) I have this:

  
  
  import React from 'react'; import Root from 'payload/dist/admin/Root'; const PayloadAdmin = () => { const [mounted, setMounted] = React.useState(false); React.useEffect(() => { setMounted(true); }, []); if (!mounted) return null; return <Root />; }; export default PayloadAdmin;
  

  
  

  so I change all of those in addition to payload.config.ts routes path

• 

  imcorfitzlast year

  How does your next.config.js file look?

• 

  gregwhitworthlast year

  const path = require('path');
  const { withPayload } = require('@payloadcms/next-payload');
  
  /** @type {import('next').NextConfig} */
  const nextConfig = withPayload(
    {
      eslint: {
        ignoreDuringBuilds: true,
      },
      // typescript: {
      //   ignoreBuildErrors: true,
      // },
      reactStrictMode: true,
      swcMinify: true,
      images: {
        domains: ['localhost', '127.0.0.1', 'res.cloudinary.com'],
      },
      async headers() {
        const headers = [];
  
        if (!process.env.NEXT_PUBLIC_IS_LIVE) {
          headers.push({
            headers: [
              {
                key: 'X-Robots-Tag',
                value: 'noindex',
              },
            ],
            source: '/:path*',
          });
        }
        return headers;
      },
    },
    {
      configPath: path.resolve(__dirname, './payload/payload.config.ts'),
      // Note: I removed the optional properties from here.
    },
  );
  
  module.exports = nextConfig;
  
  module.exports = nextConfig;

  
  

  
  

  Note that I had this done by a contractor and thus why I'm kind of stuck trying to figure out the wiring done so I appreciate the help. Also, I now have no idea how run seeding since they've been attached in this manner and I think it has to do with similar issues

• 

  imcorfitzlast year

  Aha... Well - ehm.. so... you will notice at the top that we are wrapping this entire configuration in a

  withPayload

  wrapper. This merges your configuration together with some default Payload-related configuration to make everything work for you. I am not sure why you are using the

  pages

  directory with the

  _app.tsx

  file rather than the

  app

  directory, but assuming the configuration would be the same, you will notice that

  withPayload

  adds a custom

  rewrites

  object, which includes this:

  
  

  {
          source: "/admin/:path*",
          destination: "/admin",
        }

  
  
  

  So in your next.config.js, you could try and add like this:

  
  
  

  const nextConfig = withPayload(
    {
      // ... All your other config
      rewrites: [
        {
          source: "/account/:path*",
          destination: "/account",
        }
      ],
    },
    {
      // ...Payload's config
    }
  );

  
  
  

  And see if that solves the problem?

• 

  gregwhitworthlast year

  @Corfitz that fixes it. While somewhat different, it's a little related. I'm no longer able to do payload seed nor generate types. Any suggestions on how to bring those into a next context?

• 

  imcorfitzlast year

  This could be a matter of your environement variables not being set to find the payload config correctly. How does your file structure, your generate types command, and your payload env variables look? (Pls - DON'T share ENV variables that have any sensitive information like passwords, AWS keys, license keys to third party software etc.)