Why I chose Nextjs for this Portfolio.

When looking at various options for deploying this portfolio. I was already familiar with setting up projects using software including:

webpack, create-react-app, and vite.

I was drawn to Nextjs for the features it offers regarding server-side rendering (SSR) and static site generation (SSG) as well as its overall compatibility with other frameworks and libraries I wished to use, including Styled Components and Reactjs.

How does Nextjs, an application that generates static-sites, then work with a library such as React which is all about providing highly interactive components? The answer, hydration is used to attach react-listeners to the statically generated DOM nodes. In Nextjs this happens on pageload, allowing for a fully interactive yet statically generated site.

From what I've read and experienced firsthand,

Server-side rendering can help to improve the overall speed of your application providing there are no other restricting factors.
SEO is improved thanks to google and many other search engines favouring fast sites in their rankings. On top of this, Nextjs stores the head component within the content it sends to the server, making it easy for search-engines and search engine robots to read your application.
Data security - Static webpages have no direct connection to the database, data or other dependencies, providing added security to the site.

JAM stack

This site was built ultimately using a version of the JAM stack (Javascript, API & Markdown). JAMstack sites are known for being quick and efficient, perfect for a light-weight portfolio.

Developers love it too!

Using _app.ts/js add _document.js/ts files, you are able to automatically restart the application when any changes are detected, similar to nodemon, which is very convenient for prototyping and styling.

I also found that to work smoothly with styled components, you should have a .babel file present, signifying that styled-components are being used.

{
    "presets": ["next/babel"],
    "plugins": [["styled-components", { "ssr": true }]]
   }

Overall

I enjoyed working with the new technologies Typescript, HTML & CSS, to produce this portfolio site and would recommend for others to try these build-tools.

Why Nextjs?

The Importance of Dummy Data

The Coder within

Time spent working in Chinese EdTech

Zustand 🐻