Best approach to set up low traffic Next.js website
Hi Payload community,
I'm new to payload and this discord community so please don't mind if this is a trivial question.
I want to build a website for my university club which will have mostly static pages but some dynamic data driven components like projects, upcoming events, etc. A full blown backend seems to be overkill for this so I decided to explore payload for it's admin panel/data handling.
Ideally, I would like to do most of the data handling with getStaticProps() and create a new build when the CMS data is changed (e.g. an event is added by the team) as I expect there won't be very frequent changes. But I'm not sure how to set up the website to trigger a build upon updating the content in payload.
I see that there are various ways to integrate a Next.js app with payload:
1. Set up a separate payload server which will act like a usual backend server with an admin panel. Deploy the Next.js app on vercel.
This approach seems straightforward to me but I'll have to maintain 2 different deployments.
2. A monorepo approach like in the nextjs-payload boilerplate provided by the payload team. I have parts of the frontend built already, I couldn't figure out how to add payload to the existing nextjs app. Also seems like I won't be able to deploy to vercel this way?
3. I saw another repo by the payload team - next/payload which apparently exposes payload in a serverless way using nextjs API routes. However the package still seems to be in early development so I'm not sure if/how to use it.
I would love to deploy this website with free-tiers of any cloud providers (at least initially) as I'm not sure if my university will be providing any budget for this website.
Any suggestions or advice is appreciated!
Thank you!
I've attempted a deployment solution where you click a button in the admin that triggers the next.js dev server to shut down, statically export, turn back on, then sync to an s3 bucket.
The problem with this approach is that the bigger the site gets, the longer and longer the export becomes. And the bigger the export, the more upload cost you're incurring on aws.
the better solution i've found is to host next.js in incremental static regeneration mode. You have to host it somewhere, but if you do that, you can sit cloudfront in front of that host and it'll cache all requests, making it way easier to keep costs low
Is your payload server deployed on the same server as nextjs?
yup
Great, do you know of any resources which demonstrate how to add payload-server into an existing nextjs app?
Thanks!
Actually I’m not sure outside of just hooking them up myself lol. The main thing I did was generate an auth token in play load, then I set up an api route in next js to handle the gql requests. That’s the gist of it.
There is a nestjs+payload example in the payload GitHub org. It runs both in the same process.
Thanks!
I will follow this approach going forward.
Payload has a great community 🙂
I have a very small B2B site, deployed to a free tier Google Cloud VM.
Instead of Get Static Props, I use Incremental Static Regeneration. I have my revalidate set to once per hour.
https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regenerationI also use Cloudflare's CDN to cache the static pages, further reducing server load.
@Shailesh Shenoy We're actively working on a website template right now which will include a complete Next.js front-end and will cover the basic needs of most websites like page building, previewing, etc. It won't be shipped monorepo but you can easily do that yourself. While that's being developed you might find our preview example helpful
https://github.com/payloadcms/payload/tree/master/examples/preview. It too includes a complete front-end and will answer some of your questions around triggering static rebuilds. This example is strictly to show the preview feature and ISR. The website template will include this plus many more features–I'll post an update to this thread in the coming weeks.
Thanks @jacobsfletch
I tried adding payload with required dependencies to my nextjs 13 app but was not able to get it running due to various issues (webpack, dependencies, etc.)
Maybe this is due to my lack of experience with build technologies. I went ahead and started a new repo using the nextjs-custome-website template from payload team:
https://github.com/payloadcms/nextjs-custom-serverAnd I am in the process of copying my nextjs pages/files to this repo which is working well for now.
It will be helpful if there is a guide to add payload to existing nextjs application for beginners like me!
100% guides like this are crucial
This would make a great blog post
I might be able to slap something together sometime
Or if anyone else stumbles upon this thread, let it rip!
Continue the discussion in Discord
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.