After my internship this past summer, I gained a lot of experience in front end development and wanted to try my hand at creating a personal website. For the tech stack, I used Next.js, Typescript, and Tailwind CSS for the UI. I used the app router in Next.js, primarily because of the extra features it gives you. It makes fetching data from external APIs much simpler in my opinion, and I do think the project structured routes are easy to pick up. Below, I talk a little bit more about my choices for technologies I used and why I think they're so great.
Why Tailwind - I definitely want to talk more about how much I enjoy using tailwind. For starters, the light and dark mode themes I was able to have on the site was as easy as 1 line of code in tailwind. I simply added darkMode: 'class' to the top of my tailwind.config file (super easy, super cool). Also, I think tailwind makes it so much easier to style your pages. I've always struggled with raw CSS and being able to visualize the component tree and where to apply which styles. I think Tailwind is super helpful with this.
Content Management - For this site, I used Sanity for the first time. I am deploying this site on Vercel (which is super easy for Next.js apps) and Sanity works extremely well with Next.js and Vercel. It's a NoSQL backend system that was super easy to set up, just install Sanity CLI, initialize Sanity in your project directory (sanity init), and you'll be walked through the rest of the process. Sanity also provides you with some template schema for your data so you can hit the ground running. Their GROQ language for querying your datasets was also very easy to learn, only took a little time reviewing the documentation and some examples. Now as I post this article, I am writing directly in Sanity Studio. Once I click publish, it will automatically be displayed on my site (pretty cool in my opinion). In addition, Sanity has a very robust free tier, so it's perfect for a project of this size. Would highly recommend trying it out if you're working on a Next.js app!
Another thing I like about Sanity is the ease of setting up private datasets. Not that anything on this site needs to be protected, but it has made following best practices easier. In order to access the API for my sites data you need to be authenticated with a token that only I can generate, which is pretty cool overall. Also, Sanity Studio can be embedded into your project and hosted on the same domain (check out the /studio route of this site), which I think is pretty cool. By having this, it makes it really easy to interact with/update my site's data. It also handles authentication for you here and sets up the Next.js route on its own.
Since the code for this site is accessible on my GitHub, I am not going to go into much more detail, I really just wanted to talk about how awesome Tailwind and Sanity have been for development. I am going to try to keep posting blogs like this as I continue working and adding features, so check back if this was interesting/helpful!