This application was build as a demo for my my workshops and hands-on-lab, you can follow along and build a similar app at home by checking out this documentation tutorial.
The goal is to build a quick RSVP Event application, while learning web development with Next.js 13 core features:
- Client Components
- Server Components
- Routing, Layouts, Errors, Loading UI...
- Data Fetching on the client and on the server
- Route Handlers, Suspense, Async/Await...
- Env Variables
- SEO (metadata, openGraph, robots, sitemap..)
next/image,next/font,next/link...- Along with TypeScript and TailwindCSS 💙
To make it easy for ourselves, We are going to use an API based on my Guichet.com events data, hosted on a json-server, and handle the RSVP part on local storage.
In case of difficulties, reach out to me live at the conference/workshop, or drop me DM on Twitter (X) if you're doing this exercise at home!
At the end, you can checkout the whole source code of this application in this Github Repository, and customize your app with more features! Stay Creative!
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
http://localhost:3000/api/hello is an endpoint that uses Route Handlers. This endpoint can be edited in app/api/hello/route.ts.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.