Netzon logo
Technology 2 min read

Introducing the Netzon Blog: Powered by Next.js 14

J. Law. Cordova image

J. Law. Cordova, Senior Software Engineer

Introducing the Netzon Blog: Powered by Next.js 14 image

Welcome to the first post for the Netzon Blog! We’re excited to share with you the cutting-edge features of Next.js 14 that have been utilized to build a modern and code-first blogging platform for Netzon.

Routing: Simplified and Elegant

The release of Next.js 14 introduced the App Router, a game-changer in the way we create pages and layouts. With the addition of new conventions such as page.tsx and layout.tsx, the process to create webpages has never been more streamlined.

Although the Netzon Blog is a static site, the potential for server-side rendering is certainly possible. We've chosen to export our project as static, keeping our site cost-efficient and allowing us to place everything - even the content - in our code repository.

Rendering: Optimal Performance Meets Flexibility

Next.js 14 brought in Server Components. This allows for a distinction between server and client rendering. Here are their main differences:

  • Server Components: By default, all components in Next.js 14 are server components, which is ideal for data fetching and backend resource handling. This keeps sensitive information secure and reduces JavaScript bundles.
  • Client Components: These are designed for adding interactivity and accessing browser APIs.

Netzon Blog, being an open static site, utilizes less backend handling. Server components are consumed and exported into a traditional statically generated site during build time.

Metadata: SEO Enhancement

SEO is a critical aspect of any blog. Next.js 14 makes it straightforward with the export of a metadata object. This approach allows for simple SEO enhancements. Here’s how we’ve set it up for the Netzon Blog:

// app/layout.tsx

const url = "https://blog.netzontech.com";
const title = "Blog – Netzon – Creating Positive Impact Through Technology";
const description = "Netzon is a software company...";

export const metadata: Metadata = {
  metadataBase: new URL(url),
  title: title,
  description: description,
};

Furthermore, individual articles on the Netzon Blog have dynamic metadata generated at build time, ensuring each post is finely tuned for the best possible search engine performance.

Conclusion

The Netzon Blog is a testament to the power and flexibility of Next.js 14. We've harnessed its latest features to create a platform that not only delivers content efficiently but also ensures a great user experience while maintaining high SEO standards.

Stay tuned for more posts as we delve deeper into the technology world and share insights and updates. Happy reading!


J. Law. Cordova image

J. Law. Cordova, Senior Software Engineer

Looking for a team to build your Next.js app?