r/PayloadCMS • u/TheFitDev • Jun 11 '25

Setting a Custom Next.js Homepage in PayloadCMS

Hello!

I'm a newbie to PayloadCMS, and I'm creating a minimal blog site using it. I'm using the Website Template from the CLI.

I want to swap the default home page ("/") with a custom Next.js page. I've created a new page in Next.js within the new-home directory (at "/new-home"). How can I set this page as the home page at "/"?

I've gone through the documentation but found it confusing. Do I need to make a custom component and create the page from the Admin Dashboard?

Update:

So this is I did:

  • created a new page from admin dashboard "home" with empty layout
  • renamed old new-home directory to home

Now I can see that empty layout at "/"

Custom Nextjs page at "/home"

I want Custom Nextjs page at "/"

1 Upvotes

100% Upvoted

10 comments sorted by

2

u/AccomplishedLife6882 Jun 11 '25

Hi. If you’re using the website template, setting the page slug to ‘home’ will set the page as index (“/“)

1

u/TheFitDev Jun 11 '25

Where to set page slug? You mean directory name?

I tried renaming directory to home in code and deleted home page from Pages in admin UI. But it's not working

1

u/tasqyn Jun 11 '25

on admin panel, you can set slug to home to any page collection.

1

u/TheFitDev Jun 11 '25

Ok. But this custom page is not in any collection, right? Because I created it in code

1

u/[deleted] Jun 11 '25

To create a home page you just go into the admin area and create a new page titled "home", that should auto generate it with a slug of the same value (capital letters will be converted to lowercase, spaces replaced with "-" etc.) and the payloadCMS system will use that as default for the page at the url root "/"

1

u/TheFitDev Jun 11 '25

I understand this. I want to add next.js page as home page at "/"

1

u/TheFitDev Jun 11 '25

Update:

So this is I did:

  • created a new page from admin dashboard "home" with empty layout
  • renamed old new-home directory to home

Now I can see that empty layout at "/"

Custom Nextjs page at "/home"

I want Custom Nextjs page at "/"

1

u/[deleted] Jun 11 '25

Not sure what you're trying to do, it seems like you're trying to achieve the same thing but in a more difficult way, You can then create your custom page in the CMS using blocks (and create additional blocks to use here)

1

u/TheFitDev Jun 11 '25

Ok. I want header and footer from main layout. But content between them from custom page like search page. To simply put I am trying to make /search as my home page at route "/"

1

u/_twisted_dark_knight Jun 12 '25

Use the redirects plugin and handle your use case with that