Nextjs

Benchmarking GO vs Dotnet vs Nextjs

I was curious about how the server side rendering in terms of req/sec can go, dotnet and nextjs perform. So I created a simple server side rendering application in all three technologies and benchmarked them using wrk. Golang Golang was setup with gofiber and gotemplate. It performed well with around 14k req/sec. using minimal ram (~21mb) 10 threads and 400 connections Thread Stats Avg Stdev Max +/- Stdev Latency 34.05ms 31.00ms 119.93ms 77.11% Req/Sec 1.40k 411.25 4.61k 68.91% 419491 requests in 30.10s, 638.89MB read Socket errors: connect 0, read 413, write 0, timeout 0 Requests/sec: 13936.30 Transfer/sec: 21.23MB Dotnet Razor Dotnet razor performed well with around 11k req/sec. using a bit over idle ram (~53mb) ...

Nextjs - Setup with Bootstrap

Setup nextjs with bootstrap Initialize nextjs project with typescript pnpm create next-app --typescript Install bootstrap pnpm add bootstrap Add bootstrap css to app/layout.tsx or pages/_app import "bootstrap/dist/css/bootstrap.min.css"; Create a bootstrap client component components/Bootstrap.tsx "use client"; import { useEffect } from "react"; function BootstrapClient() { useEffect(() => { require("bootstrap/dist/js/bootstrap.bundle.min.js"); }, []); return null; } export default BootstrapClient; Add bootstrap client component to app/layout.tsx or pages/_app layout.tsx might look like this. import BootstrapClient from "@/components/boostrap"; import "bootstrap/dist/css/bootstrap.css"; import type { Metadata } from "next"; export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en"> <body>{children}</body> <BootstrapClient /> </html> ); } Exporting as static site. Add the following to next.config.js ...

Nextjs - Export as static site

Nextjs is a great framework to create multiple page react applications. It can also export the whole app as a static site. This is extremely useful if we want to avoid nodejs server and use another server like nginx to host the site, which is faster and more efficient. To export the site, we need to change the next.config.js file to include the following: const nextConfig = { distDir: "build", output: "export", }; export default nextConfig; This will export the app as a static site to build folder. The build folder will contain all the static files, which can be hosted using any static hosting solution. ...

Nextjs - Overview

What is Nextjs ? Is it a framework ? Is it a static site generator ? Is it a server side rendering framework ? Is it overhyped ? Yes ! Next js is a framework which uses react as its base. Let’s explore some of it. Nextjs as a framework Routing Nextjs provides a good structure of application by providing directory based routing for pages. We can create a route by creating a file named page.tsx in the app directory and the directory path will follow the route path. ...