Can Next.js show and save one booking?
A Next.js project can put a booking page and the server code that accepts a reservation together. A database or another service still has to keep the reservation.
For a new App Router project, a file such as app/book/page.tsx gives you a page at /book. Start with a repair calendar offering Tuesday at 3:00 and 3:30. When someone picks a time, send the choice to the server code that checks availability and saves it.
In an existing project, check the installed Next.js version and which routing structure it already uses before adding a new page. Use that version’s documentation and keep the dependency lockfile with the code.
Which parts run on the server and which respond in the browser?
Use browser-side code for the parts people interact with. Keep private credentials and decisions about who can book on the server.
A page that shows 3:00 as open can be out of date by the time someone submits. Check availability at the point of saving and protect the slot in storage. Check permissions in the code that receives the request even if the button is visible only after sign-in.
| Part | What it does |
|---|---|
| Server Component | An App Router page or layout can read allowed data and produce the first view of available times. |
| Client Component | The time picker can respond to taps and show a pending state while the request is being checked. |
| Server Function or route handler | On submission, check the current account and selected slot, save through your chosen database and return the result. |
Will your host run the booking code?
A static export can serve pages prepared ahead of time. A reservation that uses Next.js server features needs a deployment that can run those features when the request arrives.
Use a private preview connected only to a disposable database. Open /book directly, reserve one sample time, reload and check the saved result. Test that a second attempt at that slot is rejected. The result matters more than a successful build message.
| Setup | What to expect |
|---|---|
| Node.js server or container | The documented server deployment supports Next.js server features. Configure the app’s runtime and database connection. |
| Platform adapter | Check the host’s support for the installed version, your server actions or route handlers, and how the preview connects to test data. |
| Static export | The host serves files. A browser page can call a separately hosted API. Request-time Next.js server code is unavailable in this export. |
What do you keep and pay for if you move?
The framework code has an MIT license. Running the app can still incur hosting, database and other service charges. Keep the repository and deployment settings alongside a separate plan for moving the records.
List the host features you depend on, the environment variable names and the services that hold data or sign people in. Move one test page and its save operation first. Verify direct links, account access and a restore from a test copy before planning to switch live traffic.