Best approach to set up low traffic Next.js website

default discord avatar
Shailesh Shenoy
6 months ago
17

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!

  • default discord avatar
    jakey___
    6 months ago

    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

  • default discord avatar
    Shailesh Shenoy
    6 months ago

    Is your payload server deployed on the same server as nextjs?

  • default discord avatar
    jakey___
    6 months ago

    yup

  • default discord avatar
    Shailesh Shenoy
    6 months ago

    Great, do you know of any resources which demonstrate how to add payload-server into an existing nextjs app?


    Thanks!

  • default discord avatar
    jakey___
    6 months ago

    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.

  • default discord avatar
    thgh.
    6 months ago

    There is a nestjs+payload example in the payload GitHub org. It runs both in the same process.

  • default discord avatar
    Shailesh Shenoy
    6 months ago

    Thanks!


    I will follow this approach going forward.


    Payload has a great community 🙂

  • default discord avatar
    tacticalsmoores
    6 months ago

    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-regeneration

    I also use Cloudflare's CDN to cache the static pages, further reducing server load.

  • discord user avatar
    jacobsfletch
    Payload Team
    6 months ago

    @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.

  • default discord avatar
    Shailesh Shenoy
    6 months ago

    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-server

    And 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!

  • discord user avatar
    jacobsfletch
    Payload Team
    6 months ago

    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!

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.