Next.JS Website's Blazing Performance

Framework

Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

Next.js: The React Framework

Enter Next.js, the React Framework. Next.js provides a solution to all of the above problems. But more importantly, it puts you and your team in the pit of success when building React applications.

Next.js aims to have best-in-class developer experience and many built-in features, such as:

• An intuitive page-based routing system (with support for dynamic routes)
• Pre-rendering, both static generation (SSG) and server-side rendering (SSR) are supported on a per-page basis
• Automatic code splitting for faster page loads
• Client-side routing with optimized prefetching
• Built-in CSS and Sass support, and support for any CSS-in-JS library
• Development environment with Fast Refresh support
• API routes to build API endpoints with Serverless Functions
• Fully extendable

Next.js is used in tens of thousands of production-facing websites and web applications, including many of the world's largest brands.

Sources: nextjs, nextjs learn

How Next.JS is Coded

Built on top of React Framework, Next.JS has extra libraries to perform at optimal level.

import { Stack, Typography } from '@mui/material';
import { BlogPostProps } from '../../@types/blog';
import BlogPostItemMobile from './BlogPostItemMobile';
// ----------------------------------------------------------------------
type BlogSidebarRecentPosts = {
  recentPosts: {
    list: BlogPostProps[];
    path: string;
  };
};
export default function BlogSidebarRecentPosts({ recentPosts }: 
  BlogSidebarRecentPosts) {
  const { list, path } = recentPosts;
  return (
    <Stack spacing={3}>
      <Typography variant="h4" gutterBottom>
        Recent Posts
      </Typography>
      {list.map((post) => (
        <BlogPostItemMobile key={post.slug} post={post}
          onSiderbar path={path} />
      ))}
    </Stack>
  );
}

Performance

The foundation of our website audits are Performance: how well does your website perform?

To derive a non-bias perspective, we employ a web tool called GTMetrix.

Download PDF of Performance Reporting

Source: gtmetrix