DEV Community: Code Rifki

Next.js Is Amazing. So Why Did I Leave?

Code Rifki — Sat, 10 Oct 2026 07:54:20 +0000

Why I Loved Next.js

Next.js is an amazing framework for building modern web applications. I used it for different projects because it provides routing, server rendering, API capabilities, image optimization, and excellent React integration.

At first, everything felt convenient. A lot of functionality was already built into the framework, so I didn't need to configure everything from scratch.

But after working with it more seriously, I started noticing some things that didn't work well for my development style.

Why I Decided to Leave

1. It Started Feeling Too Complex

My biggest reason was complexity.

As my projects became more advanced, I had to think about Server Components, Client Components, rendering strategies, caching, server actions, and other framework-specific concepts.

These features are powerful, but sometimes I simply wanted to build something without having to think about so many layers.

2. Caching Behavior Was Confusing

Another issue was caching.

Next.js provides powerful caching and rendering features, but understanding exactly when data is cached, revalidated, or rendered again can sometimes be confusing.

I occasionally found myself asking: “Why am I still seeing this old data?”

Instead of focusing on the actual application, I sometimes had to spend time figuring out what Next.js was doing behind the scenes.

3. Too Much Framework Magic

This was probably the most frustrating part for me.

Next.js can automatically handle many things, which sounds great. But sometimes that convenience feels like magic.

When something doesn't behave as expected, I want to clearly understand what is happening underneath. With Next.js, some behavior can feel hidden behind framework conventions.

Does That Mean Next.js Is Bad?

Absolutely not.

I still think Next.js is an excellent framework. It can be a great choice for large applications, content-heavy websites, and projects that benefit from server-side rendering and modern React features.

Leaving it doesn't mean I think Next.js is bad. It simply means I realized that its trade-offs don't always match the way I want to build applications.

Practical Alternatives

If you feel the same way, you don't necessarily need to abandon React. One practical approach is to use React with a simpler build tool when you primarily need a client-side application.

For projects that need server-side rendering but less framework complexity, consider evaluating alternatives such as Astro, Remix, React-Router, Tanstack Start or other React-based frameworks.

Another option is to keep your architecture deliberately simple: use a straightforward API, choose an explicit caching strategy, and avoid adding framework features unless the project actually needs them.

The goal isn't to find a "better Next.js." It's to find a stack where you understand what is happening and can work comfortably with it.

Conclusion

Next.js is amazing, but it isn't perfect for everyone. For me, the combination of complexity, caching behavior, and framework magic eventually became frustrating enough to explore other options.

That doesn't make Next.js a bad framework. It simply taught me an important lesson: the best technology isn't always the one with the most features—it's the one that makes your work easier.

Hydration Errors in Next.js: What They Are and How to Fix Them

Code Rifki — Sat, 10 Oct 2026 07:43:21 +0000

What Is a Hydration Error?

A hydration error in Next.js happens when the HTML generated on the server doesn't match what React expects when it runs in the browser.

Think of it like two people creating the same puzzle but placing a few pieces differently. React notices the mismatch and may display a hydration warning or error.

Common causes include using browser-only APIs such as window or localStorageduring rendering, generating random values, displaying different content based on the current time, or rendering different HTML on the server and client.

How to Fix Hydration Errors

First, check whether your component produces different output between server and client. Avoid using window, document, or localStoragedirectly during the initial render.

For browser-dependent logic, use useEffectinside a Client Component when appropriate. Also make sure your HTML structure is valid and avoid unnecessary conditional rendering based on browser state.

If you're using third-party libraries, check whether they expect to run only in the browser.

Step-by-Step Debugging Process

Step 1: Read the Error Message

Start with the browser console and Next.js development overlay. Look for the component or element mentioned in the hydration warning. This gives you a useful starting point instead of debugging the entire application.

Step 2: Find Dynamic Content

Search the affected component for values that can change between renders, such as Date.now(), Math.random(), generated IDs, or time-dependent content.

Step 3: Check Browser-Only APIs

Look for window, document, localStorage, and sessionStorage. If they're accessed while rendering, move that logic to a client-side effect or another appropriate client-only solution.

Step 4: Compare Server and Client Output

Ask yourself: Would this component render exactly the same HTML on the server and in the browser? Check conditional logic that depends on browser state, screen size, cookies, or other client-only information.

Step 5: Check HTML Structure

Invalid HTML nesting can also trigger hydration problems. Make sure elements are properly nested and that interactive elements aren't incorrectly placed inside one another.

Step 6: Test Third-Party Libraries

Temporarily remove suspicious third-party components. If the error disappears, check whether the library supports server-side rendering or requires client-only initialization.

Step 7: Rebuild and Test Again

After fixing the suspected cause, restart your development server and test the affected page again. A clean rebuild can also help confirm that the mismatch has actually been resolved.

Troubleshooting Tips

Keep the initial server and client render deterministic.
Avoid random or time-dependent values during rendering.
Don't access browser APIs directly during server rendering.
Use Client Components only when client-side functionality is required.
Validate your HTML structure.
Test third-party components individually.

Conclusion

Hydration errors in Next.js usually come from differences between server-rendered HTML and client-rendered content. By following a systematic debugging process—checking the error, dynamic values, browser APIs, HTML structure, and third-party libraries—you can identify the cause much faster. Keep your initial render consistent, and your Next.js application will be more reliable and easier to debu

REST API vs GraphQL: What's the Difference?

Code Rifki — Sat, 03 Oct 2026 05:33:38 +0000

What Is REST API?

REST API is a popular approach for building communication between applications. It uses HTTP methods such as GET, POST, PUT, and DELETEto work with resources.

For example, an endpoint like /api/products might return a list of products. REST is straightforward, widely supported, and relatively easy for beginners to understand.

What Is GraphQL?

**GraphQL **is an API query language that lets clients request exactly the data they need. Instead of calling multiple endpoints, a client can often use a single GraphQL endpoint and specify the required fields.

This can be useful for applications with complex data requirements, especially when different screens need different combinations of information.

REST vs GraphQL: Which Should You Use?

REST can be a practical choice for simple APIs, traditional CRUD applications, and systems with clearly defined resources. GraphQL can be useful when clients need flexible queries or when data comes from multiple related resources.

Neither approach is universally better. The right choice depends on your application's requirements, team experience, and API architecture.

FAQs

Is GraphQL faster than REST?
Not necessarily. Performance depends on factors such as database queries, caching, network requests, and server implementation.

Can REST and GraphQL be used together?
Yes. An application can use REST for some services while using GraphQL for other parts of its architecture.

Conclusion

The difference between REST API and GraphQL mainly comes down to how clients request and receive data. REST uses resource-based endpoints, while GraphQL allows clients to define the data they need. Choose the approach that fits your application's complexity, data requirements, and development workflow.

Common Next.js Mistakes Beginners Make (and How to Avoid Them)

Code Rifki — Sat, 03 Oct 2026 04:52:52 +0000

1. Using "use client" Everywhere

One common mistake beginners make in Next.js is adding "use client" to almost every component. While Client Components are useful for interactivity, unnecessary usage can increase the amount of JavaScript sent to the browser.

Start with Server Components and use "use client" only when you need browser-side features such as state, event handlers, or effects.

2. Ignoring Next.js Image Optimization

Using regular <img> elements everywhere can mean missing out on features provided by the Next.js Image component. For many projects, next/image can help optimize image loading and improve performance.

3. Fetching Data in the Wrong Place

Beginners sometimes fetch data inside Client Components when the data could be retrieved on the server. With the App Router, consider fetching data in Server Components when client-side interaction isn't required.

4. Creating Huge Components

Putting an entire page into one massive component makes your code difficult to maintain. Break reusable sections into smaller components with clear responsibilities.

FAQs

Should beginners always use Server Components?
Not always. Use Server Components by default, then switch to Client Components when interactive browser functionality is needed.

Is "use client" bad?
No. It is an important Next.js feature. The problem is using it when the component doesn't actually need client-side functionality.

Conclusion

Avoiding common Next.js mistakes can make your applications easier to maintain and improve performance. Focus on understanding Server and Client Components, data fetching, image optimization, and component structure. Start applying these practices to your next Next.js project and build better habits from the beginning.

Understanding the Next.js App Router in 5 Minutes

Code Rifki — Sat, 03 Oct 2026 04:33:50 +0000

What Is the Next.js App Router?

The Next.js App Router is the modern routing system introduced in Next.js, built around React Server Components. Instead of keeping all routes in one configuration file, you create routes using folders and special files inside the appdirectory.

For example, app/about/page.tsx automatically creates the /about route. Simple, right?

The App Router also provides built-in support for layouts, loading states, error handling, and dynamic routes, making it easier to organize larger applications.

How Does the App Router Work?

The basic structure is straightforward:

app/page.tsx → Homepage
app/about/page.tsx → About page
app/blog/[slug]/page.tsx → Dynamic blog page
app/layout.tsx → Shared layout

By default, components inside the App Router are Server Components. You can use "use client" when a component needs browser-side interactivity, such as state or event handlers.

Conclusion

The Next.js App Router gives you a structured way to build modern React applications with routing, layouts, data fetching, and Server Components. Start with the app directory and learn its core files first. Build a small project and experiment with nested and dynamic routes to get comfortable quickly.

Server Components vs Client Components: When to Use Which

Code Rifki — Fri, 02 Oct 2026 12:36:27 +0000

Understanding Server and Client Components

If you're building with Next.js, you’ll quickly encounter Server Components and Client Components. But which one should you use?

Server Components run on the server and are ideal for fetching data, accessing databases, and keeping sensitive logic away from the browser. They can also help reduce the amount of JavaScript sent to users.

Client Components, marked with use client, run in the browser. Use them when your component needs interactivity, such as state, event handlers, forms, or browser APIs.

Think of Server Components as your application's backend kitchen, while Client Components are the part customers interact with directly.

When Should You Use Each?

Choose Server Components for static content, data fetching, authentication checks, and database operations. Choose Client Components for interactive UI elements like dropdowns, modals, counters, and dynamic forms.

FAQs

Can Server Components use "useState"?
No. React hooks that require browser-side interaction, such as useStateand useEffect, belong in Client Components.

Should every component use "use client"?
No. Add it only where client-side functionality is actually required.

The Difference Between SPA and PWA

Code Rifki — Fri, 02 Oct 2026 12:06:24 +0000

When building modern web applications, you may come across the terms SPA (Single Page Application) and PWA (Progressive Web App). Although they are often mentioned together, they are actually different concepts.

A SPA focuses on how an application works, while a PWA focuses on improving the web experience with features such as offline support, installation, and caching.

What Is a SPA?

A Single Page Application (SPA) is a web application that loads a main page and dynamically updates its content without requiring a full page reload.

Frameworks and libraries such as React, Vue, and Angular are commonly used to build SPAs.

For example, when a user moves from a dashboard to a settings page, a SPA can update the interface without completely reloading the browser.

This can make applications feel faster and smoother, especially for interactive applications such as:

Admin dashboards
SaaS applications
Project management tools
Web-based applications

What Is a PWA?

A Progressive Web App (PWA) is a web application that uses modern browser features to provide a more app-like experience.

A PWA can provide features such as:

Offline support
Installability
Caching
Push notifications
App-like navigation and behavior

PWAs commonly use technologies such as service workers and a web app manifest.

Unlike a native mobile application, users can access a PWA directly through a web browser.

A SPA does not automatically become a PWA.

Likewise, a PWA does not have to be a SPA.

However, developers can combine both approaches.

Conclusion

The difference between SPA and PWA is mainly about their purpose. A SPA focuses on application architecture and dynamic navigation, while a PWA focuses on enhancing a web application with modern browser capabilities.

They are not competing technologies. A single web application can be both a SPA and a PWA, depending on its requirements.

Variables in TypeScript

Code Rifki — Thu, 10 Sep 2026 08:08:50 +0000

Variables are one of the most basic building blocks of any TypeScript program. They allow you to store information such as names, numbers, user data, and application settings. If you're familiar with JavaScript, you'll find TypeScript variables very familiar, but TypeScript gives you an extra layer of type safety.

How to Declare Variables in TypeScript

TypeScript uses the same let, const, and var keywords as JavaScript. However, you can specify the expected data type using a colon (:).

For example:

let username: string = "John";
let age: number = 25;
let isActive: boolean = true;

Here, username must contain a string, age must contain a number, and isActive must contain a boolean value. If you accidentally assign the wrong type, TypeScript can warn you before the application runs.

Using `let` and `const`

In modern TypeScript development, let and const are generally preferred over var.

Use let when the value needs to change:

let score: number = 10;
score = 20;

Use const when the value should not be reassigned:

const website: string = "My Website";

What Is TypeScript?

Code Rifki — Thu, 10 Sep 2026 08:02:32 +0000

TypeScript is a programming language developed by Microsoft that builds on JavaScript by adding static typing and other development features. Think of it as JavaScript with an extra safety net, it helps developers catch potential errors before their code runs.

Unlike JavaScript, TypeScript allows you to define the type of data a variable, function, or object should contain. This can make large applications easier to maintain, especially when multiple developers are working on the same project.

Why Should You Use TypeScript?

One of the biggest advantages of TypeScript is improved code reliability. Your editor can detect many mistakes while you're writing code, saving you from discovering them later in the browser.

TypeScript also provides better autocomplete, clearer documentation, and easier refactoring. It works especially well with modern frameworks such as React, Next.js, and Node.js.

DEV Community: Code Rifki

Next.js Is Amazing. So Why Did I Leave?

Why I Loved Next.js

Why I Decided to Leave

Does That Mean Next.js Is Bad?

Practical Alternatives

Conclusion

Hydration Errors in Next.js: What They Are and How to Fix Them

What Is a Hydration Error?

How to Fix Hydration Errors

Step-by-Step Debugging Process

Step 1: Read the Error Message

Step 2: Find Dynamic Content

Step 3: Check Browser-Only APIs

Step 4: Compare Server and Client Output

Step 5: Check HTML Structure

Step 6: Test Third-Party Libraries

Step 7: Rebuild and Test Again

Troubleshooting Tips

Conclusion

REST API vs GraphQL: What's the Difference?

What Is REST API?

What Is GraphQL?

REST vs GraphQL: Which Should You Use?

FAQs

Conclusion

Common Next.js Mistakes Beginners Make (and How to Avoid Them)

1. Using "use client" Everywhere

2. Ignoring Next.js Image Optimization

3. Fetching Data in the Wrong Place

4. Creating Huge Components

FAQs

Conclusion

Understanding the Next.js App Router in 5 Minutes

What Is the Next.js App Router?

How Does the App Router Work?

Conclusion

Server Components vs Client Components: When to Use Which

Understanding Server and Client Components

When Should You Use Each?

FAQs

The Difference Between SPA and PWA

What Is a SPA?

What Is a PWA?

Conclusion

Variables in TypeScript

How to Declare Variables in TypeScript

Using let and const

What Is TypeScript?

Why Should You Use TypeScript?

Using `let` and `const`