Discovering Next.js: Why It’s My Go-To Framework for React Applications
In this blog post, I’ll share my experience working with Next.js and why it’s my preferred choice when building large React applications these days.
What is Next.js?
Before diving into my reasons for choosing Next.js, let’s briefly discuss what it is. Next.js is a powerful, open-source React framework developed by Vercel.
It is built on React, Node.js, and JavaScript. It’s designed for production ready React web applications. Next.js comes with all the opinions built into it, making it a full blown framework.
Next.js is a React framework for the web.
Alright, let’s discuss some of the key reasons why I love working with Next.js:
Production Ready Framework
In the past, while working with React applications using the Create React App (CRA), you would simply get a bare bone folder structure to begin with. Decisions will have to be made on how to build your React applications.
Decisions on Routing, Data Fetching, Server-Side Rendering, Bundling, SEO, Code Splitting and many more was usually time consuming. This is because React is a flexible library, and allows you to make these decisions yourself. It is kind of nice and provides flexibility, but you do spend lot of time making these decisions on larger projects.
Next.js comes with all the nuts and bolts put together.
With Next.js, you do not have to worry about making these decisions for your app. Instead, it comes with all the nuts and bolts put together. Routing, SEO, Optimization, Data Fetching, SSR, Code Splitting, and many more are built into the framework. This means, you can simply focus on building high-quality React apps, without having to worry about what router to use, or how to optimize the code for search engines.
Next.js takes care of all of this, and you can simply get to work. This is ideal for large teams and everybody is on the same page.
Dynamic and Static Data Fetching
With Next.js data fetching has become easier and exciting. What’s cool is you can now fetch data directly in your React components from the App router in Next.js. You can simply make your React component async, and await the data that is being fetched.
In the example below, you can see how speaker data is fetched within the component, using the fetch API.
// app/conference/speakers/page.js
async function getSpeakers() {
// Server-Side Rendering or Dynamic Data Fetching
const res = await fetch(`https://...`, { cache: 'no-store' })
const speakers = await res.json()
return speakers;
}
export default async function Page() {
const speakers = await getSpeakers(); // Fetch speaker data
return (
<ul>
{speakers.map((speaker) => (
<li key={speaker.id}>{speaker.name}</li>
))}
</ul>
);
}Next.js taps into both dynamic data fetching (Server-Side Rendering) as well as static data fetching.
You can utilize static data fetching for pages whose content does not change much like a blog post or an introduction page to your company. With static data fetching, you can fetch the data once and cache it indefinitely. Alternatively, you can also revalidate the cache in regular intervals of time.
With dynamic data fetching or SSR you can fetch data on every fetch request. This is typically used for dynamic data like shopping cart, comments page, etc.
SSR happens at the time of each page request. The server fetches data, generates the HTML, and then sends this HTML to the client. This process repeats with every request.
SSR is great for pages with data that changes frequently. SSR in Next.js allows you to deliver a fully rendered page to the client, improving the performance of your React applications and boosting their visibility on search engine results pages.
You can choose the type data fetching on a page-by-page basis in Next.js. Which means, some pages can be Server Side Rendered and some can be Client Side Rendered.
The flexibility with data fetching in Next.js is a huge motivator for me to choose Next.js as a framework to build my React apps.
React Server Components
Server Component is a new concept that has been introduced in React 18, and been adopted by Next.js 13 within the /app folder.
Server Components allow you to render components on the server, and reduce the amount of JavaScript sent to the client.
Typically your page is composed of small components. You will notice that many of the components are usually non-interactice. This means they can be rendered on the server as Server Components. For the other components, which have interactive UI, you can render them as Client Components. This approach is exciting to a React developer like me and Next.js allows us to tap into this feature.
Automatic Code Splitting
Next.js implements automatic code splitting, which means each page only loads the JavaScript necessary for that particular page, and nothing more. This feature significantly improves loading times, providing an overall better user experience. As someone who prioritizes performance and efficiency, this feature of Next.js is incredibly beneficial.
Easy Routing and Navigation
Routing in a React application can sometimes be a complex task requiring additional libraries like React Router. Next.js simplifies this process by implementing a file-based routing system out-of-the-box.
Next.js uses a file-system based router where folders are used to define routes.
Each folder represents a route segment that maps to a URL segment. To create a nested route, you can nest folders inside each other
Pages are created in the ‘app’ directory, and the file path corresponds to the URL route, making routing and navigation a breeze. You can define pages by exporting a component from a page.js file as shown below:
// `app/page.tsx` is the UI for the `/` URL
export default function Page() {
return <h1>Hello, Welcome to Home page!</h1>
}Built-in Optimizations
Next.js comes with several built-in optimizations for images, font, scripts and metadata.
The img component, is optimized for performance by lazy-loading the images and automatically resizing them based on the device dimensions. The next/font will automatically optimize your fonts (including custom fonts) and remove external network requests for improved privacy and performance.
These optimizations boosts the app’s performance, look and feel, and you don’t have to worry about adding any special code. They are all built-in to Next.js!
Routes Handlers
Another standout feature of Next.js is its support for Route Handlers. You can easily create API endpoints within your Next.js app, without needing to configure a separate server. This feature simplifies back-end development, making it faster and more streamlined.
Route Handlers allow you to create custom request handlers for a given route using the Web Request and Response APIs.
They are defined within the route.ts file inside the /app folder as shown below:
export async function GET(request: Request) {}Excellent Community
Lastly, the active Next.js community and comprehensive, user-friendly documentation make working with Next.js a pleasure. The community is always ready to help, and the documentation is filled with examples and guides that aid in understanding and utilizing the framework’s features effectively.
Real-Life Applications
Next.js has been my trusted companion for several projects. From personal portfolio websites to complex e-commerce platforms, Next.js has facilitated the creation of robust, high-performance web applications.
Here is a large list of websites built with Next.js: https://nextjs.org/showcase
Conclusion
Next.js has proven to be an invaluable tool in my web development journey. It’s a powerful, efficient, and versatile framework that significantly enhances the process of building React applications. As I continue to explore and work with Next.js, I look forward to discovering more ways in which this framework can optimize my web development process.
Resources
Alright folks, that’s a wrap! Hope you enjoyed this article! Here are some resources that will come handy in your journey to learn React and Next.js:
You can check out my latest course on Next.js 13 on Pluralsight below:
This course covers the fundamentals of Next.js 13, and also teaches you to build a demo app using the new /app directory and teaches the concepts of Server Components and Server-Side Rendering.
Official Docs:
Where can you reach me?
For information on my consulting services visit: adhithiravichandran.com
To stay connected follow me on Twitter: @AdhithiRavi
Subscribe to my stories on Medium https://adhithiravi.medium.com/subscribe
