Introduction
I recently built my personal website with Next.js 13, TypeScript, and Tailwind. This was probably my first time using TypeScript for a website, and I was really impressed with how it helped me to write more robust and maintainable code. I also really enjoyed using Tailwind for styling, as it made it really easy to create a custom look and feel for my website.
Goals
My goals for the website were to share my work with the world, promote myself professionally, and have a place to call my own online. I wanted to create a website that was visually appealing, easy to use, and informative.
Technologies
I used Next.js as the framework for my website. Next.js is a React framework that is built for server-side rendering. This means that my website is rendered on the server before it is sent to the browser, which results in faster loading times and better SEO.
I also used TypeScript for the frontend of my website. TypeScript is a superset of JavaScript that adds type safety to the language. This makes it easier to write more robust and maintainable code.
Finally, I used Tailwind for styling my website. Tailwind is a utility-first CSS framework that makes it really easy to create custom styles without having to write a lot of CSS code.
New Features in Next.js 13
Some of the new features in Next.js 13 that I am using on this website, including:
- App Directory for routing: The App Directory is a new way to organize your routes in Next.js. Instead of having to define your routes in a single file, you can now define them in a directory structure. This makes it easier to organize your routes and to keep your code DRY.
- React Server Components: React Server Components are a new way to render React components on the server. This can be useful for improving performance and SEO.
- Font System: The Font System has been improved with new features like automatic font optimization, support for custom fonts, and built-in support for self-hosting fonts.
- Link Component: The Link component has been improved with new features like automatic link prefetching and support for custom prefetching strategies.
Static Site Generation
I used Static Site Generation for my blog. This means that my blog posts are generated as static files ahead of time and then served to users from a CDN. This has a number of benefits, including:
- Improved performance: Static files are served directly from a CDN, which can significantly improve performance.
- Better SEO: Static files are easier for search engines to index, which can improve your website's SEO.
- Reduced costs: Static files don't require any server-side processing, which can save you money on hosting costs.
If you're looking to improve the performance, SEO, and cost-effectiveness of your website, I would recommend using Static Site Generation.
Challenges
The biggest challenge I faced while building my website was learning TypeScript. TypeScript is a complex language, and it took me some time to get used to it. However, once I got the hang of it, I found that TypeScript was a really powerful tool that helped me to write better code.
Another challenge I faced was finding the right balance between using Tailwind and writing custom CSS. Tailwind is a great tool for quickly creating custom styles, but it can be easy to overuse it. I found that it was helpful to write some custom CSS for certain elements on my website, such as the header and footer.
Learnings
I learned a lot from the experience of building my website. I learned about TypeScript, Tailwind, and Next.js. I also learned about the importance of planning and designing a website before you start building it.
I would recommend anyone who is considering building a website to do their research and plan out what they want to achieve. It is also important to choose the right technologies for your project.
Conclusion
I am really happy with the outcome of my website. I am proud of what I have accomplished, and I am excited to continue learning and growing as a web developer.
I am also excited to see what the future holds for Next.js, TypeScript, and Tailwind. I believe that these technologies have the potential to revolutionize the way we build websites.