Module 1 · Public levelPublic pages
Home page, catalog and product pages rendered on the server, so they reach the browser and the search engines complete.
Examples of deliverables
- Catalog and product pages
- Content pages
- Public forms
Technology · Application framework
Application development with Next.js
Next.js is a framework built on React that adds what an application needs around the interface: routes, pages rendered on the server, user sign-in and functions that talk to your database. We use it to build applications that have a public side and a private one in the same project.
Often combined with
Fig. 01Two-level modelLooping
Situations
What you can solve with a Next.js application
Next.js makes sense when the project is more than a website and more than a screen: there is something anyone can see, something only signed-in users see and a server deciding what to show each one.
Public pages and a private area together
A catalog anyone can browse and an account where each customer sees their own, with the same design and a single deployment.
A product with users and roles
Sign-up, sign-in, permissions and screens that change depending on who comes in.
Data that must not reach the browser
Queries and keys that stay on the server: the browser receives only the result it is entitled to.
A React application that needs more
Slow loading, pages search engines can't see or sensitive logic on the client. It is moved to Next.js in parts.
What to check before starting
- Which parts are public and which need a session
- How users are identified today
- Where the data lives and who may write to it
- Where it will be hosted and what server it needs
Services
What we build with Next.js
The four parts of an application, which in Next.js live in the same project.
- Module 1 · Public level
Module 2 · Access controlPrivate areas and user sign-in
Sign-in, password recovery, roles and a permission check on every request.
Examples of deliverables
- Customer account
- Dashboard by role
- Sign-in with an outside provider
Module 3 · Technical baseServer functions and data
Reading from and writing to your database, calls to other systems and tasks that must not run in the browser.
Examples of deliverables
- Database queries
- Sending email
- Connection to an ERP
Module 4 · RiserIntegrating the parts
Interface, server, data and deployment coordinated, so a change in one part doesn't break the one next to it.
Examples of deliverables
- Staging and production environments
- Automated deployment
- Error logging
A working example
A public catalog and a private account
An illustrative example with made-up data. The catalog shows without signing in. Go into “My account” and watch the server log: it checks the session before sending any data.
- Alba chairref. A-102
- Oak tableref. M-340
- Cloud lampref. L-018
Ann Example's account
- Order 2031 · out for delivery
- Order 1987 · delivered
Server log
The session and the data are samples and live in your browser. The example sign-in comes pre-filled: there is no need, and no reason, to type real credentials.
Integration
How it fits with your systems
A Next.js application sits between people and your data. What matters is deciding early who signs in, with what, and where each piece of data lives.
Where it comes from
- React interface components and screens
- Databaseusers, orders and content
- Identity providersign-in
Next.jsNext.js applicationserves pages and checks access
Where it goes
- Node.js services long tasks and integrations
- AI features assistants and drafts
- Payments, email and ERPoperations
Dependencies worth checking
- Which hosting will be used and which framework features it supports
- How existing users are moved over
- Which data is personal and where it is stored
- What load is expected on the public pages
How we work and what we deliver
How we run a Next.js application
- 01
Initial review
What exists today: application, database, users and what each of them can see.
- 02
Scope
The map of public and private routes, the roles and the server functions. What is left out, in writing.
- 03
First release
One complete path: a public page, the sign-in and a private screen with real data.
- 04
Validation
Tests with one user of each role, including the one who should not see something.
- 05
Documentation
Environment variables, deployment, how to roll back a version and who an error alerts.
What you get when the job closes
- The repository and the deployment accounts in your name
- Staging and production environments
- Roles and permissions, documented
- A deployment and rollback guide
Questions
Questions about Next.js
Missing yours? Write it to info@veodar.com and we'll reply with a specific question, not a brochure.
What is the difference between React and Next.js?
React is the library the interface is built with. Next.js is a framework that uses React and adds routes, server-side rendering and server functions to it. A Next.js application is, on the inside, a React application with those pieces around it.
Does using Next.js guarantee search rankings?
No. Next.js can deliver pages already rendered, which is a sound technical base. Rankings depend on the content, on the structure of the site and on its authority; the framework alone does not decide them.
Does Next.js tie me to one hosting provider?
No. It can be deployed with several providers or on your own server with Node.js. Some features depend on the platform, so hosting is chosen at the start, not at the end.
Can you migrate an existing React application?
Yes, usually in parts: routes and public pages first, then sign-in and data. The application keeps working during the move.
Where is user data stored?
In the database you choose, in accounts in your name. Passwords are never stored in plain text and the keys to other services stay on the server, out of the code that reaches the browser.
Updated:
Other technologies
What it is combined with
- React developmentDashboards, search and complex forms. Interfaces connected to your data, to look things up and get tasks done from the browser.
- Node.js backendAPIs, connections between systems and background processes. We automate the exchange of information between your website and your business tools.
- Generative AI integrationAssistants over your documents, sorting of information and draft generation. We bring these features into your website and your working tools.
Get started
Tell us which application you want to build.
What anyone sees, what only signed-in users see and where the data lives today. With those three things we can talk about scope.
What helps us assess it
- What anyone sees and what only a user sees
- Which roles exist
- Where the data lives today
- Whether there is a previous application
Before you write, see how we price a project or our solutions by department.
Fig. 07Morse keyH · E · L · L · O