This is a Next.js project bootstrapped with create-next-app.
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
Open 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.
Learn More
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!
Deploy on Vercel
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.
Harish notes
Commands to bootstrap a new next app
mkdir bookit
mv bookit next-js-bookit
cd next-js-bookit
npx create-next-app .
code .
npm run dev
# Section 8: Let's start BookIT frontend.
Setting up _document: https://nextjs.org/docs/advanced-features/custom-document Setting up header & footer Setting up layout: https://nextjs.org/docs/basic-features/layouts
# Section 9: Data fetching & pre fetching in next.js
getStaticProps: https://nextjs.org/docs/basic-features/data-fetching/get-static-props (Static site generation) getStaticPaths: https://nextjs.org/docs/basic-features/data-fetching/get-static-paths (Static site generation)
getServerSideProps: https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props (Server-side rendering)
Here we will be using this resource - https://jsonplaceholder.typicode.com/users
# Section 10: Implementing redux for state management.
npm i redux redux-thunk redux-devtools-extension react-redux next-redux-wrapper --save npm i axios
https://www.npmjs.com/package/react-toastify npm i react-toastify
Section 11: Adding pagination, search on frontend.
https://www.npmjs.com/package/react-js-pagination npm i react-js-pagination
# Section 12: Authentication with next-auth
npm i validator
https://next-auth.js.org/ npm i next-auth
Reference for next auth and Strapi integration. https://next-auth.js.org/ https://strapi.io/blog/user-authentication-in-next-js-with-strapi https://medium.com/@tom555my/strapi-next-js-email-password-authentication-a8207f72b446
{/*
<div className="ml-4 dropdown d-line">
<a className="btn dropdown-toggle mr-4" id="dropDownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>{user && user.email}</span>
</a>
<div className="dropdown-menu" aria-labelledby="dropDownMenuButton">
<Link href="/bookings/me">
<a className="dropdown-item">My Bookings</a>
</Link>
<Link href="/me/update">
<a className="dropdown-item">Profile</a>
</Link>
<Link href="/">
<a className="dropdown-item">Logout</a>
</Link>
</div>
</div>
*/}
Section 13:
Reference for forgot password: https://medium.com/@giuliamalaroda/authentication-with-next-js-and-strapi-part-3-forgotten-reset-password-48c7ee1e85d6
How to send email in Strapi: https://github.com/strapi/strapi/tree/main/packages/providers/email-nodemailer
How to extend the user-permissions plugin to add update/me route: https://medium.com/@fabian.froeschl/add-updateme-route-to-strapi-4-0s-users-permissons-plugin-fc31798df295
# Section 14:
https://reactdatepicker.com/ https://reactdatepicker.com/#example-date-range
npm i react-datepicker
Section 15:
Install the stripe cli. The to test the webhooks we run the following command.
stripe listen --events checkout.session.completed --forward-to localhost:1337/api/bookings/webhook stripe listen --events checkout.session.completed --forward-to localhost:1337/api/bookings/stripe-webhook --skip-verify
Stripe webhook require raw body, to get that we need to do this setting in the Strapi middleware. https://github.com/strapi/strapi/issues/4720#issuecomment-1028953626