Custom front-end and admin panel on same domain

Hello everyone,

There’s something I can’t figure out about self-hosting a ghost installation. I just setup my ghost installation, so I have my front-end at https://antoninbarbier.com and my admin panel at /ghost, running on an Nginx install I have on my VPS.

The thing is I want to create my own custom front-end using Next.js, and I’d like to have it on the same domain as my admin panel. So my question is, would it be possible for me to have the admin panel on a subdomain, like so: admin.antoninbarbier.com, and my custom front-end at antoninbarbier.com (instead of the default front-end delivered by Ghost).

Thank you for the help

Hey @Skery :wave:
That’s totally possible with the Ghost Content API, we even have documentation on how to use Next.js with Ghost:

If you’ve got any other questions let us know!

1 Like

Hey @DavidDarnes, thank you for the quick answer.

In fact I understood well how the Ghost Content API works and how it allows me to get my Ghost data to my Next front-end, and already checked the documentation. My problem has more to do with hosting. I don’t know how to do (or even if it’s possible) to get my admin panel at admin.mydomain.com instead of mydomain.com/ghost.
Also, I don’t know how to “replace” the default front-end with my own Next.js front-end. I mean, even if I decide to host my Next.js app on another domain, and connect to ghost through the Ghost Content API, what about the default front-end ? Do I just let it exist, be reachable by anyone ? Is there any way to make it unreachable ?

Sorry if I’m not clear or miss something, i’m quite new to hosting, servers etc…

Is there a specific reason you want to host it on a subdomain? The existing Handlebars front-end can either be hidden using Private mode in the Ghost admin settings, or you can set up redirects to all your pages redirect to the Next.js counterpart site. More info can be found here:
https://ghost.org/docs/api/v3/nextjs/recipes/#redirecting-to-external-urls