Making Choices: Graduating From Vanilla JS to NEXT.js

When I dived into coding in September 2022, I started with Python, followed by Javascript.

I was aware of the existence of JS frameworks like Angular, Vue, React and NEXT.js (based on React) but the learning curve seemed steeper and I wanted to start my journey with the basics.

The first micro SaaS I released in September 2023, the AI Jingle Maker, fully coded with my AI assistants (ChatGPT and GitHub Copilot), was developed in Python (Flask), HTML, CSS and Vanilla JS.

It’s the old school approach: Python for the backend and pure Javascript for the front end interactions, connecting to the backend when needed via fetch requests to Flask routes.

Here’s an example of the process, from another project recently shipped for a client.

fetch request, in Vanilla JS

const response = await fetch('/get-threads');
threads = await response.json();

And the corresponding Flask Route, in Python/Flask

@app.route('/get-threads', methods=['GET'])
def get_threads():

    try:
    #backend logic, redacted

        return jsonify(threads)
    
    except Exception as e:
        print(f'Error: {str(e)}')
        return jsonify({'error': str(e)}), 500

To be fair, I could have kept working with this stack. It does the job!

It’s perfectly fine for small projects and very easy to read. It’s also simple to understand: pages in the templates folder are traditional HTML files, frontend interactions are defined in JS files in the static folder, styling is declared in a CSS file in the static folder.

Both JS and CSS files are referenced in the HTML, this way, using the Flask convention:

<link href="{{ url_for('static', filename='styles.css') }}" rel="stylesheet">

<script src="{{ url_for('static', filename='scripts.js') }}"></script>

But I was curious to explore the cutting edge of web development.

I wanted to understand why most frontend developers have moved to more advanced JS frameworks.

I was also inspired by the journey of Marc Louvion, a prolific indie maker, who recently shipped a micro SaaS boilerplate powered by NEXT.js.

🏆WHY NEXT.js?

I had heard and read great things about NEXT.js, developed and promoted by Guillermo Rauch, the CEO of Vercel.

I asked one of my assistants, Perplexity, why I should graduate from Vanilla JS to NEXT.js.

As far as I’m concerned, the main argument was around the organization of the components, which would accelerate my shipping cadence.

I had already dabbled with NEXT.js in late 2023, connecting a basic NEXT.js index page with a signup form to a Python backend. So I reopened the folder in Visual Studio and focused on the NEXT.js code.

Quickly I understood that NEXT.js wasn’t just about frontend code.

This React-based framework would also allow me to develop the backend, incl. API routes, in JS too.

I was super excited to get my hands dirty and ship something.

The first micro app I developed was an image cropper. You can test it here.

It allowed me to understand the basic structure of a NEXT.js project.

I’ve read that there’s been a recent evolution from PAGE routing to APP routing in NEXT but at the moment I’m using the page routing method, where .tsx files in the pages folder define my pages (for instance cropper.tsx for the example above).

👍The Power of Components

I’ve started playing with components which can imported into different pages.

I have for instance developed a minimalist voice recorder, stored in /components and imported into my audiopage.tsx ( <AudioRecorder />).

You can test it here (warning: it doesn’t store the sound blob at the moment, you’ll just get a nice SweetAlert2 pop up confirmation).

import AudioRecorder from '../components/soundrecorder';

function AudioComponents() {
  return (
    <div>
      <h1 style={{ textAlign: 'center', marginTop: '40px' }}>Audio Page Demo</h1>
      <AudioRecorder />
    </div>
  );
}

export default AudioComponents;

I also shipped an app to quickly create social media images in different formats.

The square-shaped color picker is a component, used three times on the page for 3 different purposes.

Here is the code of the component.

import { useState } from 'react';

const colors = [
  '#ff0000', '#00ff00', '#0000ff', '#ffff00', '#00ffff', '#ff00ff', 
  '#ffffff', '#000000', '#800000', '#008000', '#000080', '#808000', 
  '#800080', '#008080', '#808080', '#333333'
];

const ColorPicker = ({ color, setColor }) => {
  return (
    <div style={{
      display: 'grid', 
      gridTemplateColumns: 'repeat(4, 1fr)', 
      gap: '5px',
      maxWidth: '160px',
      margin: 'auto'
    }}>
      {colors.map((c, i) => (
        <div 
          key={i} 
          onClick={() => setColor(c)} 
          className="colorSquare"
          style={{ 
            background: c, 
            border: color === c ? '2px solid #000' : 'none',
          }} 
        />
      ))}
    </div>
  );
}

export default ColorPicker;

Which is then imported into dynamic.tsx

import ColorPicker from '../components/ColorPicker';

And used in the JSX section of my page (JSX stands for Javascript XML. It allows you to write HTML in React).

 <div className='pickerContainer'>
      <div>
        <span>TEXT</span>
        <ColorPicker color={textColor} setColor={setTextColor} />
      </div>
      <div>
        <span>BACKGROUND</span>
        <ColorPicker color={bgColor} setColor={setBgColor} />
      </div>
      <div>
        <span>URL</span>
        <ColorPicker color={urlColor} setColor={setUrlColor} />
      </div>
    </div>

All in all, it took me 2 days to learn the ropes of NEXT.js and ship 4 different micro apps (I also explored dynamic table creation, calling a stocks API).

I’m now ready to create a collection of components and release my very first full blown micro SaaS in NEXT.js, incl. authentication and payments.

I’ll keep you posted.

If you have any questions, don’t hesitate to contact me via email: [email protected]. We can also connect on Linkedin.

👨‍💻Mentoring Opportunity