A modern starter based on Next.js 14 (App Router), Tailwind, daisyUI, and Netlify Core Primitives (Edge Functions, Image CDN, Blob Store).
In this site, Netlify Core Primitives are used both implictly for running Next.js features (e.g. Route Handlers, image optimization via next/image, and more) and also explicitly by the user code.
Implicit usage means you're using any Next.js functionality and everything "just works" when deployed - all the plumbing is done for you. Explicit usage is framework-agnostic and typically provides more features than what Next.js exposes.
This site requires Netlify Next Runtime v5 for full functionality. That version is now being gradually rolled out to all Netlify accounts.
After deploying via the button below, please visit the Site Overview page for your new site to check whether it is already using the v5 runtime. If not, you'll be prompted to opt-in to to v5.
-
Clone this repository, then run
npm installin its root directory. -
For the starter to have full functionality locally (e.g. edge functions, blob store), please ensure you have an up-to-date version of Netlify CLI. Run:
npm install netlify-cli@latest -g
- Link your local repository to the deployed Netlify site. This will ensure you're using the same runtime version for both local development and your deployed site.
netlify link
- Then, run the Next.js development server via Netlify CLI:
netlify dev
If your browser doesn't navigate to the site automatically, visit localhost:8888.
This is a submission for the Netlify Dynamic Site Challenge: Visual Feast.
This project showcases three key features of Netlify, each feature is specifically demonstrated through a different application that I made: Link to Demo https://apple-vision-concept-dynamic-site.netlify.app/
Home page screenshot
- Memories App Concept - This article
- Albums App Concept - https://dev.to/srikant_code/albums-apple-vision-concept-app-using-netlifys-blobs-next-js-9ep
- Discover App Concept - https://dev.to/srikant_code/discover-apple-vision-concept-app-using-netlifys-cache-revalidation-next-js-ssr-1ifj
Hey👋, I'm Srikant Sahoo. I'm excited to present this project for the Netlify Dynamic Site Challenge. This project is a cutting-edge concept user interface designed for virtual reality devices, taking inspiration from futuristic concepts like Apple Vision👓 to showcase how Netlify's capabilities can be leveraged to create such applications in future for VR use cases.
Side note for your reference - More info on Apple Vision Pro https://www.apple.com/newsroom/2024/02/apple-announces-more-than-600-new-apps-built-for-apple-vision-pro/
The major question that I had was...
How can I use all the 3 themes in one project🤔?
Even though I had this question, I still started with creating a Image Gallery using Image CDN. But then later on during development I figured out that I can instead convert it into a small virtual app called Memories App instead of Gallery App or Photos App, and similarly create more virtual apps for the other 2 prompts.
All Photosview
So, the first thing that came into my mind was to create a mock concept environment for Apple Vision Pro👓 where users can see and interact with the 3 apps while being sitting at the couch. Thats how I proceeded and build the UX and then eventually developed it.
Three apps navigation
Below are the details on how I leveraged the Netlify Image CDN, Netlify Blobs storage and Netlify's Cache Revalidation in three different virtual apps.
This app leverages Netlify's Image CDN capability to display photos in responsive way. You can toggle the below tabs to filter images by date category and see images in different sizes.
Daysview
It queries the Image CDN to render the most optimized version for quick loading of the images in an animated way. You can click any photo to see in good resolution.
Fetches the most optimized image using queries like
&w=64&q=75
UI on clicking any image
The Netlify's blob storage is used in the Add photos to Albums button. It stores the opened photo to one of your Album (More on this below)
This app utilizes Netlify's Blobs storage to store your albums and its contents. Once you land on the page, you are automatically assigned a unique username (kind of a mock authentication).
I have written a clever and complex logic to handle the albums data in blobs. You can also see other users' albums from the Other's Albums tab.
I faced a lot of challenges while implementing this.
Initially the blobs were only working in the netlify dev env and was not working when I was deploying it (which was making it harder to debug). It bugged me for days, I needed to go through all the related documentation to understand and fix it.
But spending 1-2 days on consistent bug fixing and observing the patterns, I finally figured out the way to work with blobs.
I also faced challenges on the below
- Implementation of expiration logic of blobs to free up space.
- How to tackle multiple users updating the same blob
- How to refresh the UI between the Memories and Albums App when anything is updated.
- How to setup and use the blobs without using edge functions and instead use the Netlify APIs directly using the
use server. - And as mentioned above on deployment part
This app uses Netlify's Cache Revalidation feature to fetch the latest articles from the web (Wikipedia Random API) using Server-Side Rendering technique of Next JS). It highlights how Netlify's Cache Revalidation can ensure users always have access to the most recent information on demand.
Below code -> uses the Next cache headers and tagName to revalidate the cache
I was new to Next JS SSR, so I was initially facing difficulties with the SSR logic, but figured out how to tackle it to render the UI having the wiki article.
Please note that this project is not associated with any organization and is purely a result of my passion and 💘 for technology and innovation, which I have done both the UX design and developed it in the last 5-6 days.
All the assets, graphics, and icons used in this project have been duly referenced in the project itself for transparency, and you can find the sources in the
Referencessection of the project. This project is a testament to my commitment to ethical practices in software development.
This project is a hobby endeavor that I'm proud of, and I hope it helps you to understand the potential of Netlify's capabilities.
It took me more than 5 days to build this. Would really appreciate if you liked it and can like this post (🦄,💘). It will motivate me to create more such kind of creative applications and use Netlify in my future projects😄.
Thank you
- Memories App Concept - This article
- Albums App Concept - https://dev.to/srikant_code/albums-apple-vision-concept-app-using-netlifys-blobs-next-js-9ep
- Discover App Concept - https://dev.to/srikant_code/discover-apple-vision-concept-app-using-netlifys-cache-revalidation-next-js-ssr-1ifj