Next.js is a framework built on React. It adds the parts a live product needs, such as routing, server rendering and backend code in the same project. As a Next.js development agency, we build new Next.js apps, upgrade older ones and add features to existing codebases. Every project is in TypeScript.
When Next.js is the right choice
We use three tools for the front end of a web project.
- Plain React with Vite suits apps that sit behind a login, such as an admin area or an internal tool. Search engines never see those pages, so server rendering adds work without much gain. See React development.
- Next.js suits products where some pages must rank in search and other pages sit behind a login. A SaaS product with public feature pages, a directory with public listings and a marketplace with public product pages all fit here.
- Astro suits content sites such as a company website or a blog. Astro sends very little JavaScript to the browser, so pages stay light. We build our own site with it.
If you are not sure which one fits, we decide together on the scoping call. The written plan says which tool we chose and why.
Server rendering and SEO for web apps
A React app that renders only in the browser sends an almost empty page first. The browser then downloads JavaScript and builds the page. Google can run that JavaScript, but it may index the page later. Some other crawlers read only the first HTML they receive.
Next.js lets each page choose how it renders.
- Static pages are built once and served from a CDN. This suits pricing, feature and help pages.
- Server-rendered pages are built on each request. This suits pages with fresh data, such as a listing or a public profile.
- Incremental static regeneration rebuilds a static page in the background after a set time or when the data changes. This suits large catalogues.
We also set up page titles and descriptions through the Next.js metadata API, plus a sitemap, structured data and clean URLs. That makes each page easy for search engines to read. Rankings still depend on your content and on other sites that link to you, so we do not promise them.
The App Router, route handlers and server actions
The App Router is the current way to build Next.js apps. It uses React Server Components. These run on the server and send finished HTML to the browser, so less JavaScript reaches the phone. That helps most on slow connections and older devices.
For backend work inside the same project, Next.js has two tools.
- Route handlers are API endpoints. Examples are a webhook from Stripe or an endpoint that a mobile app calls.
- Server actions are functions that a form calls directly. A settings form can save to the database without a separate API.
We treat both as public entry points, because anyone can call them. Each one checks who the user is and validates the input with Zod before it touches the database. When the backend grows to include scheduled jobs, queues or many integrations, we move that work to a separate Node.js backend. The Next.js app then stays focused on pages.
Hosting on Vercel, Cloudflare or your own cloud
- Vercel makes Next.js, so new features work there first. Preview links for each change are built in. Costs rise with traffic and with the number of people on your account.
- Cloudflare runs Next.js on its Workers platform through the OpenNext adapter. It can cost less at high traffic, and it serves pages from Cloudflare’s network close to your users. A few features need extra setup.
- In your own cloud account, Next.js can run as a Node.js server in a container on AWS or a similar provider. This suits companies with an existing cloud setup or rules about where data is stored.
We can set up hosting in your own account, so you pay the provider directly and keep control.
Performance and Core Web Vitals
Google measures page experience with three Core Web Vitals. According to Google’s web.dev guide, a good score means:
- Largest Contentful Paint of 2.5 seconds or less. This measures how fast the main content appears.
- Interaction to Next Paint of 200 milliseconds or less. This measures how fast the page responds to a tap or click.
- Cumulative Layout Shift of 0.1 or less. This measures how much the page jumps while it loads.
In Next.js we use the built-in image and font tools so images arrive at the right size and text does not jump when fonts load. We keep client components small and stream slow sections with React Suspense, so the rest of the page shows first. Before launch we test the key pages with Lighthouse. After launch we check real user data in Google Search Console.
Upgrading or migrating an older Next.js app
Many Next.js apps still run on the Pages Router, or on a version several releases behind. Signs that yours needs work:
- Your version has published security advisories.
- Builds are slow, or they fail on newer versions of Node.js.
- Libraries you depend on have dropped support for your version.
We upgrade one major version at a time with the official codemods, and run the tests after each step. If the app has no tests, we first add tests for the main user flows, such as sign-up and checkout. The move to the App Router can happen route by route, since both routers work in the same app. We also move apps to Next.js from Create React App or Gatsby when they need server rendering.
Need a full product built on Next.js? See SaaS development and custom web app development. Prices are on the pricing page. For a smaller job, you can hire a Next.js developer from us at $60 an hour. To talk about your app, contact us.
