How I Went from Vanilla HTML, CSS, and JS to Next.js and Why You Should Too
Tags: nextjs, html, react
Published: 2023-01-17 11:22:50

When I first started building web applications, I was using vanilla HTML, CSS, and JavaScript. I was able to create some basic websites and even some simple interactive features, but as my projects grew in complexity, I found myself struggling to keep everything organized and maintainable.

That's when I discovered [Next.js](https://nextjs.org/).

[Next.js](https://nextjs.org/) is a framework for building React-based web applications. It provides a set of features that make it easy to build scalable, high-performance web apps, such as server-side rendering, automatic code splitting, and static site generation.

One of the biggest advantages of using [Next.js](https://nextjs.org/) is that it allows you to easily organize your code. Instead of having all of your HTML, CSS, and JavaScript in a single file, you can use [Next.js](https://nextjs.org/)'s file-based routing to separate your code into different pages and components. 

For example, in a vanilla HTML, CSS and JS setup, you might have something like this:
```html
<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <header>
      <nav>
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
      </nav>
    </header>
    <main>
      <section id="home">
        <h1>Welcome to my website!</h1>
        <p>This is the home page.</p>
      </section>
      <section id="about">
        <h1>About me</h1>
        <p>I'm a web developer.</p>
      </section>
      <section id="contact">
        <h1>Contact me</h1>
        <form>
          <label for="email">Email:</label>
          <input type="email" id="email" required>
          <label for="message">Message:</label>
          <textarea id="message" required></textarea>
          <input type="submit" value="Send">
        </form>
      </section>
    </main>
    <footer>
      <p>Copyright © 2020 My Website</p>
    </footer>
  </body>
</html>
```
With [Next.js](https://nextjs.org/) you can break it down in different files:
```
- pages/
  - index.js
  - about.js
  - contact.js
- components/
  - header.js
  - footer.js
```
And in those files you have your JSX and styles.

Another benefit of using [Next.js](https://nextjs.org/) is that it allows you to take advantage of server-side rendering (SSR). With SSR, your app's initial HTML is generated on the server, which means that the first load of your app is faster and more SEO-friendly.

[Next.js](https://nextjs.org/) also makes it easy to do static site generation (SSG). This is a great way to build fast, lightweight, and secure websites that can be hosted on a CDN. With SSG, you can pre-render your pages at build time, and then serve the static HTML to the user. This means that you don't need to run any server-side code, which can greatly reduce the cost and complexity of deploying your app.

Here's an example of how to use static site generation in [Next.js](https://nextjs.org/):

```jsx
import { getStaticProps } from 'next/static'

export const getStaticProps = async () => {
    // Fetch data from an external API or database
    const data = await fetchData()

    // Pass the fetched data to the props
    return {
        props: {
            data
        }
    }
}

const Home = ({ data }) => {
    return (
        <div>
            <h1>Home</h1>
            <ul>
                {data.map(item => (
                    <li key={item.id}>{item.title}</li>
                ))}
            </ul>
        </div>
    )
}

export default Home
```
Finally, one of the best things about using Next.js is its fast reloading feature 🔥. With traditional web development, you might have to wait several seconds for your changes to show up in the browser. But with Next.js, your changes are reflected almost instantly 🤯. This makes the development process much more efficient and enjoyable 😎. So, if you're tired of waiting around for your changes to compile, give Next.js a try and experience the lightning-fast reloads for yourself! 🚀

All in all, I highly recommend giving [Next.js](https://nextjs.org/) a try. Whether you're a beginner or an experienced developer, you'll find that it makes building web apps faster, easier, and more enjoyable. With [Next.js](https://nextjs.org/) you can take advantage of the benefits of React and its ecosystem, while leveraging the features that [Next.js](https://nextjs.org/) provides, such as file-based routing, server-side rendering and static site generation.