Why should you use Next.js 13?
by Ilie Andrei-Leonard, Founder INNTECH
My first interaction with Next.js 13 differed from other javascript frameworks — I was impressed. (even different Next.js versions)
So, I decided to write an article about why Next.js 13 is different and why you should use it in your projects.
What is Next.js?
Next.js is a popular open-source React framework that provides server-side rendering (SSR), static site generation (SSG), and other advanced features to help developers build fast, scalable, and modern web applications. It was created by Vercel, a cloud platform for building, deploying, and scaling web applications. (We use Vercel at INNTECH to deploy our javascript-based web platforms)
Next.js is a full-stack environment where you can define API routes and UI components. You can use third parties like Firebase, Stripe, etc, directly here, without a separate backend, which helps you build tech products (like MVPs) more efficiently.
Why is Next.js relevant?
At INNTECH is very important to use technologies that allow us to build efficient, scalable, and time-efficiency tech products. So, we constantly try to test cutting-edge updates from the industry. Last week I tested Next.js 13 with headless WordPress CMS, trying to build a simple job listing for companies, and I extracted some features which should make you use Next.js 13.
Why should you use Next.js 13?
- You can use fetch() directly on your page in SSR mode. This provides significant performance benefits, including automatic caching and data re-validation.
// Next.js 13
// This is a SSR page
async function getPage(url) {
const res = await fetch(`http://localhost:3000/api/page?url=${url}`);
if (!res.ok) {
redirect("/");
}
return res.json();
}
export default async function Page({ params }) {
// You can fetch() directly here
const page = await getPage(params.url);
return (
<div>
<div>{page && page.name}</div>
</div>
);
}
// Next.js 12
function Page({ data }) {
// Render data...
}
// This gets called on every request
export async function getServerSideProps() {
// Fetch data from external API
const res = await fetch(`https://.../data`)
const data = await res.json()
// Pass data to the page via props
return { props: { data } }
}
export default Page
2. You can define “error” and “loading” components directly in your folder structure by default. A better directory structure.
3. You can define dynamic metadata very easily.
async function getJob(id) {
const res = await fetch(`https://localhost:3000/api/job/${id}`);
return res.json();
}
export async function generateMetadata({ params }) {
const job = await getJob(params.id);
return { title: job.title }
}
export default async function Page({ params }) {
const job = await getJob(params.id);
// ...
}
4. Next.js 13 introduces Automatic Image Optimization, which automatically optimizes images for faster loading and better performance. Also, the “next/font” package is optimized, and the font files are downloaded at build time with the rest of your static assets. (No requests are sent to Google by the browser. = STUNNING PAGE SPEED)
import { Inter } from 'next/font/google';
const inter = Inter({
subsets: ['latin'],
display: 'swap',
})
export default function RootLayout({ children }) {
return (
<html lang="en" className={inter.className}>
<body>{children}</body>
</html>
);
}
Conclusion
In my opinion, Next.js 13 is a game changer in the web development industry, and if you know how to use it at maximum capacity, you can build stunning websites with high conversion rates.
About me
My name is Ilie Andrei, and I am very passionate about building tech products and streamlining the process of developing and validating ideas. I founded INNTECH — a web & mobile development company focused on MVP Development and building micro-apps.