proud rose
I have set my route for admin to /account and this works just fine except for one scenarios.
If I login, click on a collection or an item under that collection it works. If I refresh that page or go directly to it it results in a 404 page. I'm unsure what the issue is. I've tried different names for /account such as /settings and it results in a 404 still. Any ideas into what I'm missing since navigating through clicks works as expected.
proud rose
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
amber hearth
Are you running a payload on express or serverlessly using next-payload?
proud rose
I'm using next-payload
amber hearth
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
proud rose
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
amber hearth
How does your next.config.js file look?
proud rose
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
amber hearth
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?
proud rose
@amber hearth 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?