From WordPress to Next.js: Exploring a New Side of Web Development

After years of working with content management systems, I finally decided to explore the modern JavaScript frameworks I'd been wanting to work with for a long time.

For most of my career, I've worked with platforms that made building and managing websites relatively straightforward. WordPress, Shopify, Ghost, and Tumblr have been a significant part of my development journey, particularly when it comes to theme development and customization.

I've spent years working with these platforms, understanding their ecosystems, building custom themes, troubleshooting issues, and finding ways to extend their capabilities.

But for the longest time, there was something else I wanted to explore: modern JavaScript frameworks like React and Next.js.

It wasn't that I didn't have an interest in learning them. I simply never had the opportunity to focus on them professionally. In my previous roles, particularly as a Senior Web Developer, much of my time was dedicated to managing projects, coordinating development work, handling technical responsibilities, and taking care of other things that came with the role.

Eventually, I found myself in a position where I could finally give these technologies the attention I wanted to give them.

When I decided to recreate my original WordPress portfolio into something more developer-oriented, I thought it would be the perfect opportunity. Rather than simply showcasing my experience with different platforms, I wanted to demonstrate my interest in modern web development by actually building something with the technologies I wanted to explore.

That decision eventually led me to React, Next.js, and Vercel.

The Comfort of Working with WordPress

WordPress has been a big part of my professional life.

Over the years, I've worked on custom themes, child themes, page builders, plugins, WooCommerce implementations, and various other customizations.

One of the things I appreciate about WordPress is its flexibility. Depending on the project, you can start with an existing theme, build something entirely custom, extend functionality through plugins, or develop your own solutions.

The ecosystem is extensive, and there's usually more than one way to accomplish something.

I've also become familiar with the operational side of running WordPress websites. Hosting environments, server configurations, performance optimization, security, backups, plugin compatibility, and maintenance are all part of the experience.

Of course, WordPress comes with its own challenges.

Plugin dependencies, compatibility issues, database performance, security updates, and maintaining multiple websites can become demanding, especially when managing several projects.

But these are challenges I've learned to work with over the years.

I don't necessarily see these experiences as something I need to leave behind. They're still valuable, and WordPress remains a platform I'm comfortable working with.

I simply wanted to expand my skill set and explore a different way of building for the web.

I Wasn't Exactly Starting from Scratch

Although React and Next.js were relatively new territory for me, I wasn't entirely unfamiliar with the JavaScript development workflow.

During my time at Artistic Influence, I was already working with Node.js, NPM, and JavaScript APIs as part of my theme development workflow.

I used tools like Webpack and ViteJS to manage assets and build the animations, styles, and interactive effects that went into our commercial themes.

These tools were part of my day-to-day development process, particularly when working on Shopify, Ghost, and Tumblr themes.

That experience gave me some familiarity with the tooling and workflows commonly used in modern JavaScript development.

However, working with build tools and JavaScript APIs is quite different from building an application using a framework like React or Next.js.

That's where things started getting interesting.

Discovering React and Next.js

My interest in exploring modern JavaScript frameworks eventually brought me to React.

Coming from a background where much of my work revolved around CMS platforms and theme development, React introduced a different way of thinking about building interfaces.

Instead of primarily working with templates, PHP, and platform-specific structures, I started exploring component-based development.

The idea of building reusable components, managing application state, and organizing interfaces into smaller, independent pieces was an interesting shift.

Then came Next.js.

What caught my attention was how it builds on React by providing additional capabilities and conventions for developing complete web applications.

Routing, rendering strategies, server-side functionality, optimization, and other features are integrated into the framework.

It wasn't simply another JavaScript library to learn. It introduced a different set of architectural concepts and development workflows.

There was definitely a learning curve.

I had to become familiar with things like the App Router, Server Components, Client Components, file-based routing, and how Next.js handles rendering.

Some concepts felt intuitive, while others required more time and experimentation.

And that's precisely what made the experience interesting.

Building My Portfolio as a Learning Experience

Rather than just following tutorials or building isolated experiments, I decided to put what I was learning into practice by developing my own portfolio.

My original portfolio was built using WordPress, which served its purpose well. But I eventually wanted something that better represented my work as a developer, including the technologies I was currently exploring.

I started by designing the website in Figma. I wanted to establish the visual direction first, including the layout, typography, spacing, and overall experience before moving into development.

For the implementation, I experimented with an AI-assisted workflow. I used ChatGPT to research Next.js concepts, explore different approaches, and better understand the technologies I was working with. I then used Claude Code, feeding it my Figma designs as references and working through the implementation to bring those designs to life.

It was an interesting experience because I wasn't just learning a new framework. I was also learning how to work effectively with AI development tools as part of an actual project.

Of course, it wasn't a matter of simply providing a design and getting a finished website in return. There was plenty of back and forth, reviewing generated code, making adjustments, troubleshooting issues, and refining the implementation until things worked and looked the way I intended.

This became my opportunity to explore the entire workflow, from setting up a project to designing, developing, and deploying an actual website.

I also had to familiarize myself with some of the development conventions and tools specific to the Next.js ecosystem.

Working with the App Router, organizing components, understanding rendering strategies, and managing the different parts of a React application introduced new concepts that I hadn't encountered in quite the same way before.

Eventually, I connected the project to GitHub and deployed it through Vercel.

Interestingly, the idea of connecting a GitHub repository to a development environment wasn't entirely new to me. Back when I was working on Shopify themes, I had already been using Shopify's GitHub integration. It allowed me to connect a repository, have Shopify detect new changes, and work with the latest updates on a development theme.

So, the concept of having a Git repository connected to a platform where I could see and test my latest changes was already familiar.

What I found interesting about Vercel was how it extended that workflow into the deployment of an entire application. By connecting my GitHub repository, Vercel could automatically build and deploy the Next.js application whenever I pushed new changes.

It was a familiar concept applied to a different development environment. Instead of managing theme changes within Shopify, I was now working with an application framework and a deployment platform that handled much of the build and deployment process for me.

It gave me a better appreciation of how these modern development workflows bring together source control, application builds, and hosting.

The portfolio itself became more than just a place to showcase my work. It became a project where I could experiment, make mistakes, and learn something new along the way.

A Different Way of Thinking About Websites

One of the biggest differences I've noticed is how much more control you have over the underlying application structure when working with Next.js.

With a CMS, much of the foundation is already established. You work within the platform's conventions and extend its capabilities based on the requirements of the project.

With Next.js, you're given a framework and a collection of tools, but you have more responsibility for deciding how everything fits together.

You have to think about project architecture, component organization, data fetching, rendering strategies, and how different parts of the application communicate.

That flexibility is great, but it also means there are more decisions to make.

I've also started appreciating concepts that weren't necessarily part of my everyday workflow before.

For example, understanding the differences between server-side and client-side rendering, learning how Server Components work, and considering where application logic should live.

These aren't things you can fully understand by simply getting a website to look right. They require a deeper understanding of how the framework works.

It's a different kind of development experience, and I'm still learning to navigate it.

What About AI-Assisted Development?

AI-assisted development has become another interesting part of this journey.

While working on my portfolio, I started incorporating tools like ChatGPT and Claude Code into my development workflow.

I used ChatGPT primarily as a research companion. Whenever I encountered unfamiliar concepts or needed to understand how something worked in Next.js, I could explore the topic, ask questions, compare approaches, and work through technical decisions.

Claude Code, on the other hand, became part of the actual implementation process. I could provide it with my Figma designs, describe what I wanted to build, and work through the generated code together.

This introduced a different way of approaching development. Instead of writing every line of code myself, I was learning to communicate requirements, provide context, review implementations, and guide the tools toward the results I wanted.

But I've also realized that using AI effectively requires a different kind of discipline.

It's easy to accept a generated solution simply because it appears to work. The more important part is understanding what was generated, reviewing the implementation, and making sure it actually fits the project.

AI can help you move faster, but it doesn't eliminate the need to understand what you're building.

If anything, it makes critical thinking and technical judgment even more important.

Am I Moving Away from WordPress?

Not at all.

I don't see this as a transition where one technology replaces another.

WordPress still has a place in my development toolkit, and my experience with CMS platforms remains valuable.

Different projects have different requirements.

Some websites benefit from the flexibility and content management capabilities of WordPress. Others may be better suited to a framework like Next.js, particularly when there's a need for a more customized application architecture or a particular development workflow.

I think the important thing is understanding the tools available and knowing when to use them.

Having experience with different platforms also gives me a broader perspective when approaching development problems.

Instead of being limited to one particular ecosystem, I can explore different solutions and evaluate which approach makes the most sense for a given project.

Still Exploring, Still Learning

I'm still relatively new to the Next.js ecosystem compared to the years I've spent working with WordPress and other CMS platforms.

There are plenty of things I haven't explored yet, and I'm sure I'll encounter more challenges as I continue building.

But that's part of the experience.

I don't think developers should limit themselves to the technologies they're already comfortable with. There's always something new worth exploring, whether it's a framework, a development tool, a different workflow, or an entirely new way of approaching a problem.

For me, exploring Next.js has been a reminder that experience doesn't mean you stop being a beginner.

You can spend years building websites, become comfortable with your tools, and still find yourself starting from scratch when you enter a new ecosystem.

And there's nothing wrong with that.

Sometimes, the best way to grow as a developer is to step outside what you already know and give yourself the opportunity to learn something different.

This is just another chapter in my journey.

I'm still building, still experimenting, and still figuring things out.

And I intend to keep it that way.