Introduction

Having moved my expertise towards being a more full-stack developer in the last year I wanted to use my new skills in Typescript to completely re-develop my website to make it smoother for the user by using a frontend framework.

This plan also allowed me to put ideas and concepts I had learned in the workplace into action in my own project such as CI (continuous integration), automated testing and development workflow.

Approach

I wanted to use React or something similar as this is what I was familiar with from work, however, SEO was important for me as I need the pages to be crawled effectively so a SPA (single page application) was not suitable.

This led me to NextJS as it combined React frontend with a server framework to deliver pre-compiled pages which are then re-hydrated in your browser using JS. This allows the data to build meta tags etc.. to be fetched and served server side so they are present immediately when web crawlers visit the page.

Implementation

I wanted to port across all the existing functionality from my django template site which included some basic pages of info about me, my cv and my projects into the new site but with plans to extend it further. By using a frontend framework the usability for interactive functions is greatly increased rather than regular html forms making it more enjoyable to use.

I have a plan for future ideas for improving the site which is on this GitHub project board

Tech

The technologies I ended up going with are:

• Nextjs (written in TypeScript)
• Prisma DB orm (postgres db hosted on heroku
• static files (images) stored in aws s3
• authentication provided by next auth
• sentry for error detection
• uptime robot for site downtime detection
• testing using playwright

Recommendations

With my experience between django rest api / React and NextJS I would say each have their place.

If I was developing a large scale web app then django/react would be my choice as django provides more facilities out of the box e.g. a built in orm with more performance features than using prisma with NextJS. However, for smaller scale or mostly database driven websites then NextJS provides a very efficient and quick to build solution for creating dynamic server side React and pre-rendering pages where possible.

Links

Code repo

Live site (This site)