This is a Next.js project bootstrapped with create-next-app.
I created a web app to show flipdish's menu. I used Static Generation, the page HTML is generated at build time. That means in production, the page HTML is generated when you run next build. This HTML will then be reused on each request. It can be cached by a CDN. Which makes it much faster than having a server render the page on every request.
It is optimized for SEO and web performance. Nextjs already has a lot of improvements in web performance, as Image component that loads images in the most efficient way and built in SSR.
You can check the menu at the home page, select dishes in the different sections and select options if they are available.
You can see the total price in the top part that. You can remove dishes, options or the total amount.
I used react context to manage the state of the menu price and add or remove items from the child components.
Install deps.
Then, run the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.
The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.
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.