DEV Community

Medea
Medea

Posted on

12 2 2 2 2

Recreating my Portfolio in Next.js

I have recently started learning Next.js/React and I wanted to compare the speeds of Next.js and the framework I used to use previously: Flask (a Python framework).
So I decided to recreate my portfolio in Next.js (the portfolio was initially created in Flask). This way I would be able to easily see the difference in load times between Next.js and Flask.

Over the last 4 days, I properly learnt how to do:

  • Components in React
  • Loops in React (this took a while!)
  • Assets in Next.js
  • How to put a Next.js website together

This is the Next.js Portfolio and this is the Flask Portfolio.
See the difference in load times!


If you want to see the source code for either portfolios, here they are.
Next.js Portfolio:

💫About Me :

Hey 🙏, I'm VulcanWM

A 15 year old Full Stack Developer from the UK

Languages and Tools

CSS3 GraphQL HTML5 JavaScript Python Swift TypeScript Heroku Netlify Vercel Expo Express.js Flask Next JS NPM NodeJS React React Native MongoDB

📊GitHub Stats :





trophy





Flask Portfolio:

💫About Me :

Hey 🙏, I'm VulcanWM

A 15 year old Full Stack Developer from the UK

Languages and Tools

CSS3 GraphQL HTML5 JavaScript Python Swift TypeScript Heroku Netlify Vercel Expo Express.js Flask Next JS NPM NodeJS React React Native MongoDB

📊GitHub Stats :





trophy






Thanks for reading, and thanks for supporting me on my Next.js journey!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (8)

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
vulcanwm profile image
Medea

Yea switching from Flask to Next.js was a bit painful, but it was pretty fun.
I’ll try using WebSockets with Next.js.
My next step is to learn TypeScript

Collapse
 
erickgonzalez profile image
Erick

You won’t regret learning TypeScript. It’s painful at first, but you reap the rewards in big projects.

Thread Thread
 
vulcanwm profile image
Medea

sure, thanks for the advice!

Collapse
 
ironcladdev profile image
Conner Ow

I love how you're actively sharing your progress in learning next.js! You should make a series on DEV going from knowing the basics to being a pro!

Collapse
 
vulcanwm profile image
Medea

thanks! yea I’ll do that, thanks for the tip!

Collapse
 
__masashi__ profile image
Masashi

Cool! Keep up with these things.
Hope you enjoy NextJS.

Collapse
 
vulcanwm profile image
Medea

Thanks!

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video