26:I[19797,["/_next/static/immutable/chunks/22aeq-wkibdl-.js","/_next/static/immutable/chunks/3kjua_pov9kpt.js","/_next/static/immutable/chunks/0k1pibo8b6qfl.js","/_next/static/immutable/chunks/0s9asiz58-zhb.js","/_next/static/immutable/chunks/0zii_d952ntnu.js","/_next/static/immutable/chunks/1h6nu3apk_3kn.js","/_next/static/immutable/chunks/0_t8jhley63bu.js","/_next/static/immutable/chunks/2w0w1pq09xcvk.js","/_next/static/immutable/chunks/3da5-gs5om1jb.js","/_next/static/immutable/chunks/2t3e4swumtl-u.js","/_next/static/immutable/chunks/2kt-y-hmm-_uq.js","/_next/static/immutable/chunks/40cg__u02n-nx.js","/_next/static/immutable/chunks/2wnpomas06otz.js","/_next/static/immutable/chunks/2s_wkp4woe4g5.js","/_next/static/immutable/chunks/0vfcj996hpa03.js","/_next/static/immutable/chunks/240f_-8rxa74y.js","/_next/static/immutable/chunks/3d0m276f6vo3k.js","/_next/static/immutable/chunks/3zz7zcw7ydci7.js","/_next/static/immutable/chunks/0btyigyc7s00d.js","/_next/static/immutable/chunks/3tak93qx009b0.js","/_next/static/immutable/chunks/0rfu1t6sc9jrt.js","/_next/static/immutable/chunks/30ary_ol2gewj.js","/_next/static/immutable/chunks/0tk8od4pd03r1.js","/_next/static/immutable/chunks/0m0a0zg15k0k-.js","/_next/static/immutable/chunks/3iaxhn-s2bt4w.js","/_next/static/immutable/chunks/3_m_2_gqu03ks.js","/_next/static/immutable/chunks/35scogezw-hf7.js","/_next/static/immutable/chunks/3vfhtmp5rodfl.js","/_next/static/immutable/chunks/1w3my8-4j9grl.js","/_next/static/immutable/chunks/077pl9qdu3_hw.js","/_next/static/immutable/chunks/3xu737ju3fyfl.js"],"BlogCategoryPostsView"] 27:T1b57,

Natasun has always been about pushing boundaries. We were one of the early adopters of Next.js years ago, and we've been on a journey ever since — from WordPress to Laravel, from Pages Router to App Router, and now to Next.js 16.

This isn't just an upgrade. It's a complete rebuild. Every file, every component, every line of code — rewritten from scratch.

Here's why we did it, what changed, and why we believe it was the right call.

The Problem With What We Had

Our previous stack wasn't bad. It was Next.js 13 with Pages Router, MUI v5, Redux for state management, and JavaScript everywhere. It worked. But it had grown into something heavy.

State lived in 20+ Redux slices. Our authentication was stitched together from Auth0, Cognito, and Firebase — three different systems that barely talked to each other. We had JavaScript files throughout the codebase with no type safety. Server-side rendering was slow because everything went through axios HTTP calls to our own API before reaching the database.

The result? Slow page loads, a bloated bundle, and a codebase that was painful to work with. Every new feature felt like walking through mud.

We knew we could do better.

Why Next.js 16

Next.js 16 with the App Router gave us something we'd been craving: Server Components.

With Server Components, most of our pages render on the server — not in the browser. That means smaller JavaScript bundles, faster first paints, and better SEO out of the box. No more client-side waterfalls. No more waiting for 20 Redux slices to hydrate before the page looks right.

Server Actions changed how we handle mutations. Instead of creating API routes and calling them with axios, we call functions directly. The framework handles the rest — serialization, error handling, revalidation.

And streaming? Our pages now load progressively. Users see content as it arrives, not all at once after everything finishes loading.

TypeScript: No More Guessing

We rewrote every single file from JavaScript to TypeScript with strict mode enabled. No any types. No escape hatches.

This might sound like a lot of work — and it was — but the payoff has been immediate. We catch bugs at compile time now, not in production. Our IDE knows exactly what every function returns, what every API response looks like, and what every component expects as props.

For a platform as complex as Natasun — with a marketplace, chat system, blog CMS, project portfolios, and job board — type safety isn't a luxury. It's a necessity.

Prisma: Direct Database Access

One of the biggest architectural changes was how we fetch data. Our old stack used axios to call our own API routes, which then queried the database. That's an extra network hop for every single data request.

Now, Server Components query the database directly through Prisma. No axios. No API routes in between. Just a straight line from component to database.

Prisma 6 gave us better performance, improved type safety, and a schema that actually reflects our data model clearly. With 30+ models — users, posts, products, orders, invoices, projects, jobs, comments, and more — having a well-typed ORM is critical.

Auth.js: One System to Rule Them All

Our old auth setup was a mess. Auth0 was configured. Cognito was configured. Firebase was configured. Three providers, three different patterns, three sets of bugs.

We replaced all of it with Auth.js v5 — a single, clean auth system that supports Google, GitHub, X (Twitter), LinkedIn, and email/password. It uses Prisma for session storage, JWT for tokens, and Cloudflare Turnstile for CAPTCHA.

Account linking works seamlessly now. A user can sign up with Google, connect their GitHub, and later log in with either one. The system just figures it out.

The Marketplace

We didn't just rebuild existing features — we added entirely new ones. The biggest addition is our digital marketplace.

Sellers can list products with images, categories, tags, and pricing. Buyers can browse, add to cart, and checkout with PayPal, credit cards, or USDT crypto. Orders are tracked with full status workflows. Invoices are generated automatically. Reviews and ratings help buyers make decisions.

All of this runs on the same Prisma + Next.js stack. No third-party e-commerce platform. No Shopify embeds. Our marketplace, our code, our rules.

Multilingual by Design

Natasun serves a global audience. We support English, Norwegian, and French — with more languages coming.

Every piece of content is stored as a JSON object with language keys. URLs are prefixed with the locale (/no/blog, /fr/about-us). Search engines index each language separately. And our i18n system handles everything from UI translations to date formatting to currency display.

This wasn't easy to build, but it was essential. Our users shouldn't have to speak English to use our platform.

SEO That Actually Works

Every public page on Natasun now generates comprehensive structured data. We're talking Schema.org markup for blog posts, job listings, products, projects, and organization data.

OpenGraph and Twitter Card meta tags are generated for every page. Hreflang alternate links tell search engines about all language versions. Dynamic sitemaps and RSS feeds keep search engines updated.

This isn't SEO as an afterthought. It's SEO baked into the architecture.

What We Replaced

Here's a quick look at what changed:

Pages Router → App Router with Server Components
JavaScript → TypeScript (strict mode)
Redux → React hooks and server state
Auth0/Cognito/Firebase → Auth.js v5
MUI v5 → MUI v7
Yup → Zod v4
Mapbox → MapLibre GL (open source)
react-slick → Embla Carousel
Redux DnD → Atlassian Pragmatic DnD
next-intl → i18next
Google Fonts → Fontsource (self-hosted)

Each change was deliberate. We didn't swap libraries for fun — we chose tools that are faster, more maintainable, and better suited to our needs.

What's Next

This rebuild is the foundation. We're now iterating fast on top of it.

Coming soon: digital download delivery, subscription plans, enhanced project collaboration tools, better analytics for members, and API improvements for third-party integrations.

We're building Natasun to be the platform where digital creators, developers, and artists actually want to work. And with Next.js 16, we finally have the foundation to make that happen.

Have thoughts? Found a bug? Want to contribute? Reach out to us or open an issue on our GitHub.

6:["$","$L26",null,{"category":{"id":"cm9e1rxbt0000le0calku76g5","title":"News","slug":"news","iconCode":"fa6-solid:file","coverUrl":"https://media.natasun.com/uploads/categories/news.jpg","description":"Stay updated with Natasun Company news, from business updates to web development trends, company insights, tech tips, and everything in between.","count":1},"posts":[{"id":"cmsz6end00000etmsqizhgk8v","title":"Why We Moved to Next.js 16","description":"We rebuilt our entire platform from scratch on Next.js 16 with React 19, TypeScript, and App Router. Here's why, and what we gained.","coverUrl":"https://media.natasun.com/uploads/blog/why-we-moved-to-nextjs-16.webp","slug":"why-we-moved-to-nextjs-16","tags":["nextjs","typescript","react","rebuild","marketplace","auth","i18n","app-router"],"content":"$27","createdAt":"2026-08-18T21:29:52.837Z","updatedAt":"2026-08-18T21:43:49.646Z","author":{"id":"clgi7nkwg0000etg4ghfxu01a","name":"Vahid","surname":"Takro","image":"https://avatars.githubusercontent.com/u/40500566?v=4","username":"vahidtakro"},"categories":[{"id":"cm9e1rxbt0000le0calku76g5","title":"News","slug":"news","iconCode":"fa6-solid:file","coverUrl":"https://media.natasun.com/uploads/categories/news.jpg"}],"metadata":{"languages":["en","no","fr"]}}],"pagination":{"page":1,"limit":9,"totalCount":1,"totalPages":1,"hasMore":false}}]

News

Why We Moved to Next.js 16

Vahid Takro