Day 1: Embracing Next.js — The Foundation of Our Website Revamp
Embracing Next.js: The Foundation of Our Website Revamp
From Wix to Custom Development: Why We Made the Switch
When we first launched our business in Vietnam, we needed a website quickly — something feature-rich, visually appealing, and easy to manage. At that time, we chose Wix, which served us very well during the early stages of our growth. Its ease of use and wide range of tools allowed us to establish a strong online presence without heavy development resources.
However, as our business expanded, so did the complexity of our website. Over time, we began to encounter limitations in flexibility and performance customization. While Wix remained a powerful platform, we found that it no longer fully aligned with the evolving needs of our team. The user interface, which had been ideal for rapid deployment, started to feel less responsive for the scale and depth of content we were managing.
As a software engineering company, we realized it was time to take full ownership of our digital presence. Building our website from the ground up with Next.js would give us the control, performance, and scalability we needed to continue growing — while showcasing our technical capabilities directly through our own platform.
Why We Chose Next.js for Our Company Website
At atWare Vietnam, our goal was clear: create a modern, fast, and scalable website that reflects our technical excellence. After careful evaluation, we selected Next.js as the core framework to power our new platform. Its powerful features, strong developer community, and adaptability made it a perfect match for our needs.
Understanding Next.js: More Than Just a React Framework
Next.js extends the capabilities of React by offering out-of-the-box support for:
- Static Site Generation (SSG): Build pages at compile time for maximum performance.
- Server-Side Rendering (SSR): Render dynamic content at request time for real-time data needs.
- Incremental Static Regeneration (ISR): Update static content automatically without full redeployments.
- API Routes: Build backend services without spinning up a separate server.
- Built-in Image Optimization: Serve responsive, fast-loading images with minimal effort.
The Key Benefits for Our Team
Choosing Next.js allowed us to:
- Boost Performance: By leveraging static generation and image optimization, we drastically improved load times.
- Simplify Deployment: Our website became easier to host, whether on Vercel, AWS, or custom servers.
- Enhance SEO: Server-rendered pages ensure that search engines can easily crawl and index our content.
- Scale Seamlessly: Next.js’s hybrid model supports growth from a small site to a complex enterprise platform.
Setting Up the Project
Our journey started with a simple command:
npx create-next-app@latest atware-home
This command scaffolded the basic structure, allowing us to immediately focus on building features instead of configuring boilerplate settings. We kept our architecture modular, separating UI components, API routes, and page structures cleanly to ensure maintainability.
On installation, you'll see the following prompts:
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
We go with all the default options to keep the setup simple and fast. It’s a solid base, and we add tooling only as needed.
Running the Development Server
Once the project was initialized, the next step was to start the development server. We simply ran:
npm run dev
After running the command, the server started, and we could access our application locally at:
http://localhost:3000
This gave us a live preview environment where we could build, iterate, and see changes instantly.
Preparing for the 7-Day Sprint
With Next.js as our backbone, we were ready to embark on a 7-day sprint to improve every part of our company website — from UI design to deployment, SEO, and performance optimization.
If you're excited to see how we transformed our website step-by-step, be sure to follow along with our full series: 📚 Explore all posts from the 7 Days Website Revamp series
Already live: Day 2: Designing the Future: Building a Stunning UI with MagicUI and Shadcn/UI!