Why React and Next.js are discussed as a pair｜株式会社ITFL

In previous articles, we have written about the mindset required in the field based on the technology sets that ITFL focuses on, such as TypeScript, backend, AWS, FlutterFlow, and GitHub.

From here on, we will delve a little deeper into each technology set.

Rather than simply explaining ‘what this technology is,’ we will look at:
How it is used in the field.
Where design decisions are required.
What kind of skills are highly valued in projects and team development.

We will examine technology from these perspectives.

This time, it is the frontend domain.
In particular, we will consider React and Next.js.

In frontend development, it is increasingly common to see React discussed not on its own, but as a pair with Next.js.

・React experience
・Next.js experience
・TypeScript experience
・API integration
・State management
・SSR, SSG
・SEO
・Performance
These terms often appear in project descriptions as well.

However, React and Next.js are not the same thing.

React is a library for building UIs.
Next.js is a framework that makes it easier to build entire web applications using React.

Understanding this difference makes it easier to see the roles required in frontend development.

1. React is a technology for building screens as components

The feature of React is that screens can be divided and built as components.
Buttons, forms, cards, lists, modals, headers, search criteria, and detail screens.

These UIs are divided into parts and screens are constructed while passing necessary data.
However, what is important in React is not just ‘being able to build screens.’

・Where to divide components
・Which data to pass via Props
・Where to hold state
・How to separate display-only parts from parts with logic
This is where design differences emerge.

For small screens, it will work even if written somewhat sloppily.
However, as the number of screens increases, API integration grows, and development involves multiple people, the quality of component design directly impacts maintainability.

People valued in React are not just those who can build screens.
They are people who can assemble UIs in a way that can withstand change.

2. Next.js is the foundation for establishing a web application

You can build screens with just React.
However, in actual web applications, building screens alone is not enough.

・Routing for each page
・Data fetching on the server side
・SEO support
・Initial display speed
・Static generation
・Authentication
・API integration
・Image optimization
・Deployment configuration
These things also need to be considered.

Next.js is a framework for making these aspects easier to handle in web application development using React.

If React is a “technology for building UIs as components,” then
Next.js is the “foundation that makes it a functional web application.”

Because of this, React and Next.js are often discussed as a pair.
Once you move from knowing only React to understanding Next.js, it becomes easier to think about the entire application rather than just individual screens.

3. For SSR and SSG, judgment is more important than terminology

When talking about Next.js, terms like SSR and SSG come up.

SSR is a mechanism that generates and returns HTML on the server side.
SSG is a mechanism that generates static HTML in advance.

Roughly speaking, the difference is when the page is generated.

However, what matters in the field is not memorizing the terms.
It is choosing which generation method to use for which page.

For article pages or corporate websites with low update frequency, static generation is often suitable.

On the other hand, for management screens or personal pages where the displayed content changes for each user, data fetching per request is necessary.
For screens with frequent data updates, such as search results or product lists, the design of caching and regeneration also comes into play.

SSR and SSG are not just technical terms.
They are design decisions based on performance, SEO, operations, and data update frequency.

This is where the difference between someone who can use Next.js and someone who can design with Next.js becomes apparent.

4. The value of frontend work increases when you can see as far as API integration

In React and Next.js projects, API integration almost always comes up.

・Fetching data to display on the screen
・Sending form input content
・Checking login status
・Passing search criteria to the API
・Displaying error details on the screen
At this point, looking only at the frontend is insufficient.

・API response format
・Status codes
・How to return errors
・Handling authentication tokens
・Displaying loading states
・Behavior during communication failures
・Display control based on permissions
When you can be conscious of these things, implementation quality improves.

People who only look at the screen think about how to display things.
People who look as far as the API think about how data flows.

This difference is significant.
Even in frontend development, those who can understand the structure of the entire system are highly valued in the field.

5. The difference lies in a design that can withstand change

In frontend development, specification changes happen often.
・Screen items increase
・Input validation changes
・API responses change
・Display conditions are added
・Screens change based on permissions
・Smartphone support is added
・Performance improvements become necessary

At these times, if the design is weak, it becomes painful every time a change is made.
・One component is too large
・Data fetching and display are tightly coupled
・Props are increasing too much
・The location of state is ambiguous
・API types are not organized
In such a state, the scope of impact for modifications expands.

What is valued in React and Next.js is not just the ability to build screens quickly.
・Ease of handling changes
・Ease of understanding for others
・Ease of tracking data flow
・Separation of responsibilities

In other words, design skills are also required in frontend development.

Summary

React and Next.js are increasingly being discussed as a set.
React is a technology for building UIs as components.
Next.js is a framework that makes it easier to structure entire web applications using React.

You can build screens with just React.
However, in actual practice, you need to consider routing, data fetching, SEO, performance, API integration, state management, and operations.

What is important is not just knowing React or having used Next.js.
・Why choose that configuration
・Where to fetch data
・Where to hold state
・How to design the boundary with the API
・Whether it is structured to withstand changes

It is about whether you can think through these points.
Frontend development is not just about creating visuals.

It is a job that connects user experience, data flow, and the structure of the entire system.
If you are learning React and Next.js, acquire not just the syntax, but also a design perspective.

I believe that is the first step toward becoming a frontend engineer who is valued in the field.

Click here for the ITFL Inc. website