Facebook maintains React, a web user interface library. Create user interfaces by combining individual JavaScript components.

Vercel maintains Next.js, a React framework used to create full-stack web applications. You use React Components to create user interfaces and Next.js for extra features and optimizations.

NextJS is a meta-framework that runs on top of React. This provides numerous features that must be manually configured in vanilla React applications.

Vanilla React does not have features like routing or SSR prebuilt. React was designed to focus on a single-page application, therefore, routing was not a part of it and libraries like TanStack Router, and React-router are used to achieve routing between pages that under the hood manipulate what needs to be seen on the browser.

Where on the other hand NextJS solves the common development issues & provides various functionality built in. Although NextJS is the house and React is the brick, developers mistakenly believe that NextJS is separate from React.

What are some Next features that can be used with React?

• Routing
• Data fetching & caching
• SSR/SSG strategies
• Optimizations
• Styling

Routing

NextJS offers a file-based routing system out of the box where we can name a folder as a path for an application and various naming conventions need to be followed for files such as page.js,layout.js, template.js,not-found.js etc. It also provides nested & dynamic path routing at various levels. NextJS provides pages router & app router where the app router is supported with new React features such as React Server Components, Server Actions etc.

SSR/SSG strategies

NextJS offers popular web strategies such as Server side rendering which renders a page on the server itself reducing the client-side JavaScript shipping, Static site generation which offers static page generation at build time and served from CDN, mostly used for blogs, docs or e-commerce pages.

This blog website is also powered by NextJS using static site generation that helps load the page quickly as it is already built during build time.

Data fetching & caching

NextJS app router is tightly coupled with React new Server components which allow a component to fetch data at the server only or directly take data from db then render the page and serve HTML to the browser. It is highly recommended to fetch data at the server and reduce client-side fetching. NextJS also supports React data streaming.

// This component shows all lists of blogs
async function AllBlogs() {
  const blogs = await db.blogs.find({});
  return (
    <div>
      {blogs.map((blog) => (
        <BlogCard {...blog} />
      ))}
    </div>
  );
}

NextJS also provides a wrapper around JavaScript fetch API that allows caching and revalidation out of the box.

async function Users() {
  const users = await (await fetch("dummyuser.api/users")).json();
  return <div>{JSON.stringify(users)}</div>;
}

Optimizations

NextJS provides components & APIs that help you to optimize your react application, such as <Image>,<Script>,Next Fonts,Metadata etc.

<Image> component helps you to optimize images such that a poor network can load images too. <Script> component allows you to add scripts to pages optimistically. NextJS gives a bunch of optimized fonts from Google to use directly in your application and metadata for pages to get SEO rankings.

Styling

NextJS supports CSS Modules, Tailwind CSS, CSS-in-JS and Sass too for styling the components in your application.

Conclusion

Next is a great resource for React developers who want to learn new patterns in React and create production-quality applications. Additionally, React advises developers to select a framework like Next, Remix, etc. By using NextJS, you can also gain greater transparency into the most recent React features integrated into the framework, including client and server components, and gain insight into the direction that the modern web is taking. Link to get started with NextJS.