Next JS 13 Image Gallery

Learning SSR, ISR, SSG, CSR etc, with new app directory and other new features.

---

Random Images without api key: Here (But this doesn't provide json)

---

Here we are using This API

• List of images (json): https://picsum.photos/v2/list
• With page number & limit: https://picsum.photos/v2/list?page=2&limit=100
• Get image JSON by id: https://picsum.photos/id/0/info
• Get image of specific id: https://picsum.photos/id/106/2592/1728

---

Next 13.4+ features covered:

1. App router

2. ignore folders from routes using ()

3. next/navigation (pathname etc..)

4. Different data fetching techniques:

   • SSR
   • SSG
   • ISR
   • revalidation (3 ways)
   • caching
   • CSR

5. Metadata

6. Generate Dynamic metadata

7. Generate Static Params

8. Disable Dynamic Params

9. not-found, error and layout files

10. API routes (GET, POST, PATCH, DELETE requests)

11. nextjs config

12. Social media OG image (opengraph-image.png)

---

Others:

1. Tailwind
2. Typescript