This is a Next.js project bootstrapped with create-next-app.

Getting Started

1. Config environment variables: (https://nextjs.org/docs/basic-features/environment-variables)

cmd:  cp .env.local.example .env.local
- Use .env.local to load environment variables
- Expose environment variables to the browser by prefixing with NEXT_PUBLIC_ as NEXT_PUBLIC_COOKIE_PASSWORD, NEXT_PUBLIC_API_URL

2. Run command line to start project:

npm run dev
# or
yarn dev

Then, open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. 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.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Features App

• Login/SignUp page [Account Test: email: [email protected], pass: 1-6]
• User List with pagination
• Detail page

Requirements

• Pages
• Layouts, Nested layouts
• Styling, module scss
• Assets Optimization [ Image, Font, Script ]
• Pre-rendering
  • SSG
  • SSR
• Data Fetching
• Routing
  • Index Routes
  • Nested Routes
  • Dynamic Routes
• API Routes
• Middleware
• Authentication

Learn More

• Use Module Scss. We use Css styles module

• Form Validation Next Form Validation, use yup & hookform/resolvers

• API API routes

Use Cases:
For new projects, you can build your entire API with API Routes. If you have an existing API, you do not need to forward calls to the API through an API Route. Some other use cases for API Routes are:
- Masking the URL of an external service (e.g. /api/secret instead of https://company.com/secret-url)
- Using Environment Variables on the server to securely access external services like .env.production

• Use NextAuth.js

• Use React Hooks for Data Fetching SWR

• Use RxJS - Alert (Toaster) Notifications

• Config Environment Variables

• Middleware Authentication with Iron session. For code demo: Link. Middleware How to create a generic protected route in Next.js or Use Next.js Middleware

• Nullish coalescing operator (??)

• Push an object to an Array in TypeScript

• Nested dynamic layouts in Next.js apps

FAQ

1. Why we use SWR?:

• Traditionally, we fetch data once using useEffect in the top level component, and pass it to child components via props. Usually, we need to keep all the data fetching in the top level component and add props to every component deep down the tree. The code will become harder to maintain if we add more data dependency to the page.
• SWR solves the above problem. With the useUser hook we just created, the code can be refactored, all components are independent to each other, Fast, lightweight and reusable data fetching, Built-in cache and request deduplication, ...

2. How to enable hover with TypeScript in Visual Studio Code?

Go to extensions, typing @builtin and enabling my language extension "TypeScript and JavaScript Language Features"