Sanity-Next-Blog is a NextJS 13 blog tutorial by Sonny Sangha. It is made using the latest version of Next13 including the expiremental appDir feature as well as the latest version of Sanity studio. It is styled using tailwind CSS.
Sanity-next-blog is a simple and user-friendly blog that provides an excellent introduction to the core concepts of NextJS 13, TypeScript, and Sanity. Upon launching the application, users are greeted with a well-designed header that is visible on every page, adding to the site's overall aesthetic appeal. The homepage also features a fully responsive grid layout that displays all of the blog previews in an organized and visually appealing manner.
Clicking on a specific blog post takes users to the blog detail page, which features a custom-designed blog title header and a body that accepts block content from Sanity. The blog body is displayed using custom rich text components, which were exclusively designed by Sonny. These components not only provide an excellent visual experience but also allow for a more engaging and informative read. Overall, the simple and straightforward design of Sanity-next-blog ensures that users can easily navigate and enjoy the content without any distractions.
Developing this application was an excellent opportunity for me to gain valuable experience coding with NextJS and TypeScript. Throughout the development process, I found Sonny's explanations of concepts and tips and tricks to be clear and easy to grasp, which helped me to improve my skills and make progress with the project.
In addition, Sonny introduced me to a trick that simplifies the configuration of Sanity, which I found to be a great improvement compared to the usual folder structure of Sanity that I had been using before. This trick streamlined the configuration process and made it easier to manage the application's content, ultimately saving me time and effort. Overall, the development of Sanity-next-blog was a highly rewarding experience that allowed me to learn and grow as a developer.
Since the tutorial is fairly new, few challenge was encountered. I played around with the idea of using a markdown type file to display the blog content however every solution I found online was limited by type errors which was a challenge being a beginner in typescript. One improvement Sonny could make in this tutorial is to explain each type interfaces which would surely help fellow beginners in typescript.
That being said, I opted to create a static blog instead using a markdown-to-jsx to display blog content. That new NextJS blog can be found here.
Having completed the tutorial which served its purpose to make me understand NextJS 13 and typescript concepts, there will be no future improvement in this app.
Please don't forget to leave a ⭐🙏🏻!
In order to run this application on your local machine, you can run the following commands on the terminal:
Installs the required package dependencies
Runs the client in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.