Creating a Website with Next.js and React

Why Choose Next.js for Your Website

Building a modern website requires more than just HTML and CSS. Today's digital landscape demands fast performance, excellent SEO, and seamless user experiences. Next.js, built on top of React, provides a comprehensive framework that delivers all these requirements out of the box.

Next.js provides a full-stack framework that includes server-side rendering capabilities, static site generation, automatic code splitting, file-based routing, and built-in API routes. These features work together seamlessly, allowing developers to build production-ready websites without the overhead of configuring complex tooling or integrating multiple libraries. The framework handles the complexity of rendering strategies, allowing developers to focus on creating exceptional user experiences.

For businesses looking to establish a strong online presence, partnering with a professional web development agency can accelerate the development process while ensuring best practices are implemented from the start.

Key advantages of using Next.js for website creation:

• Built-in server-side rendering - Improves SEO and initial page load speed
• Static site generation - Pre-rendered pages for maximum performance
• File-based routing - Intuitive route management without extra libraries
• Automatic code splitting - Smaller bundle sizes, faster loading
• Image optimization - Automatic resizing and format optimization
• SEO-friendly by default - Search engines can crawl rendered HTML immediately

One of the most compelling reasons to choose Next.js for website creation is its built-in performance optimization. Unlike plain React applications that rely solely on client-side rendering, Next.js supports multiple rendering strategies that can be applied on a per-page basis. Server-side rendering delivers fully rendered HTML to the browser, which search engines can crawl immediately, improving SEO rankings. Static site generation takes this further by pre-rendering pages at build time, resulting in lightning-fast load times that are crucial for user retention and search engine optimization.

The automatic code splitting in Next.js ensures that each page only loads the JavaScript it needs, rather than sending the entire application's code to the client. This feature works transparently in the background, so developers don't need to manually configure code splitting or dynamic imports. Combined with Next.js's image and font optimization components, websites built with Next.js consistently achieve better Core Web Vitals scores than equivalent React applications.

Setting Up Your Next.js Project

Creating a new Next.js project is straightforward thanks to the create-next-app CLI tool, which sets up a fully configured development environment with sensible defaults. The command prompts you through several configuration options including TypeScript, ESLint, Tailwind CSS, and the App Router. For modern Next.js development, the App Router is the recommended approach as it introduces React Server Components and provides more intuitive patterns for data fetching and layout management.

# Create a new Next.js project
npx create-next-app@latest my-website

# Project structure created:
# ├── app/ # App Router directory
# │ ├── layout.tsx # Root layout
# │ ├── page.tsx # Home page
# │ └── globals.css # Global styles
# ├── public/ # Static assets
# ├── next.config.ts # Next.js configuration
# └── package.json

TypeScript in Next.js provides exceptional developer experience:

The TypeScript configuration in Next.js provides excellent developer experience with automatic type inference and intelligent code completion. The framework's TypeScript plugin offers type-safe routing, automatic prop typing for components, and compile-time error detection that catches common mistakes before they reach production. This type safety becomes increasingly valuable as projects grow in complexity, making collaborative development more manageable. With Next.js, you get full type safety without sacrificing developer velocity, and the framework handles much of the type configuration automatically.

// next.config.ts configuration
export default defineNextConfig({
 images: {
 domains: ['example.com'],
 formats: ['image/avif', 'image/webp'],
 },
 // Enable server actions for form handling
 experimental: {
 serverActions: {
 bodySizeLimit: '2mb',
 },
 },
});

For teams adopting TypeScript, Next.js offers a seamless experience where types flow naturally from data fetching through to component props. The framework's built-in type definitions cover all Next.js-specific APIs, and the TypeScript compiler integrates with IDEs to provide real-time feedback on type errors. This combination of type safety and framework convenience makes Next.js an excellent choice for projects of any size, from simple marketing sites to complex web applications.

Understanding the Project Structure

Next.js 15+ uses the App Router as its default file-based routing system, organizing routes as folders within the app directory. Each route folder can contain a page.tsx file that makes that route accessible, a layout.tsx file that provides shared UI for that route and its children, and special files like loading.tsx and error.tsx that handle specific states. This file-based approach eliminates the need for complex routing configuration, making route organization intuitive and maintainable.

app/ → /
├── layout.tsx → Root layout (applies to all pages)
├── page.tsx → Home page
├── about/
│ ├── page.tsx → /about
│ └── team/
│ └── page.tsx → /about/team
├── services/
│ └── [slug]/
│ └── page.tsx → /services/[slug] (dynamic route)
└── contact/
 └── page.tsx → /contact

Root Layout (app/layout.tsx)

The root layout provides consistent UI across all pages, including HTML structure, metadata, fonts, and global styles. It wraps all pages and remains persistent during navigation. Layouts can be nested, with each layout wrapping its child routes while maintaining its own state and not re-rendering when navigation occurs.

// app/layout.tsx - Root layout with metadata
import type { Metadata } from 'next';
import { Inter, Playfair_Display } from 'next/font/google';
import Header from '@/components/Header';
import Footer from '@/components/Footer';
import './globals.css';

// Optimized font loading
const inter = Inter({ subsets: ['latin'], variable: '--font-inter' });
const playfair = Playfair_Display({ subsets: ['latin'], variable: '--font-playfair' });

export const metadata: Metadata = {
 title: {
 template: '%s | Digital Thrive',
 default: 'Digital Thrive - Professional Web Development',
 },
 description: 'Building exceptional digital experiences with modern web technologies.',
};

export default function RootLayout({
 children,
}: {
 children: React.ReactNode;
}) {
 return (
 <html lang="en" className={`${inter.variable} ${playfair.variable}`}>
 <body className="antialiased">
 <Header />
 <main className="min-h-screen">{children}</main>
 <Footer />
 </body>
 </html>
 );
}

The layout architecture in Next.js enables powerful patterns for persistent UI. Authentication states, theme providers, and global providers can all live in the root layout without re-initializing during navigation. This approach significantly improves perceived performance by eliminating unnecessary re-renders and maintaining client-side state across route changes.

Building Components with React in Next.js

Component Architecture Fundamentals

React's component-based architecture forms the foundation of any Next.js website, enabling developers to build modular, reusable pieces of UI. Components in Next.js can be implemented as Server Components by default, which execute exclusively on the server and send only HTML to the client. This default behavior significantly reduces the JavaScript bundle size sent to browsers, improving both performance and time-to-interactive metrics. Client components, marked with the 'use client' directive, handle interactivity like event handlers and state that require browser APIs.

The distinction between Server and Client Components is fundamental to modern Next.js development. Server Components cannot use hooks like useState or useEffect because those are browser-specific APIs, but they excel at data fetching and rendering static content. Client Components, while necessary for interactive features, should be used sparingly to maintain the performance benefits of server-side rendering. This architecture encourages a clear separation between data fetching logic (Server Components) and user interaction logic (Client Components).

// components/Header.tsx - Server Component (default)
import Link from 'next/link';

export default function Header() {
 return (
 <header className="site-header">
 <nav className="flex justify-between items-center">
 <Link href="/" className="logo">
 Digital Thrive
 </Link>
 <div className="nav-links">
 <Link href="/about">About</Link>
 <Link href="/services">Services</Link>
 <Link href="/resources">Resources</Link>
 <Link href="/contact">Contact</Link>
 </div>
 </nav>
 </header>
 );
}

// components/Counter.tsx - Client Component
'use client';

import { useState } from 'react';

export default function Counter() {
 const [count, setCount] = useState(0);
 
 return (
 button 
 onClick={() => setCount(count + 1)}
 className="counter-button"
 >
 Count: {count}
 </button>
 );
}

Managing State with React Hooks

React hooks provide elegant solutions for managing component state and side effects. The useState hook creates reactive state that triggers re-renders when updated, while useEffect handles side effects like data fetching, subscriptions, or DOM manipulation. Modern React patterns encourage composing smaller hooks into more complex behavior, creating reusable logic that can be shared across components.

// hooks/useData.ts - Custom hook for data fetching
import { useState, useEffect } from 'react';

export function useData<T>(url: string) {
 const [data, setData] = useState<T | null>(null);
 const [loading, setLoading] = useState(true);
 const [error, setError] = useState<Error | null>(null);

 useEffect(() => {
 async function fetchData() {
 try {
 const response = await fetch(url);
 const json = await response.json();
 setData(json);
 } catch (err) {
 setError(err instanceof Error ? err : new Error('Unknown error'));
 } finally {
 setLoading(false);
 }
 }
 fetchData();
 }, [url]);

 return { data, loading, error };
}

Custom hooks abstract away complex state management or data fetching logic, making components cleaner and more focused on presentation. This pattern aligns well with Next.js's component model, where pure presentation components remain simple while logic is extracted into composable hooks. By keeping client-side code to a minimum and leveraging Server Components for data operations, you can build applications that are both performant and maintainable.

Data Fetching in Next.js

Server-Side Data Fetching

Next.js introduces powerful patterns for data fetching that leverage React Server Components. In the App Router, components can be declared async, allowing direct use of await to fetch data from databases, APIs, or external services. This pattern eliminates the need for client-side data fetching libraries and loading states, as the framework automatically suspends rendering until data is available. The fetched data is then rendered to HTML on the server, providing fast initial page loads and excellent SEO.

// app/about/page.tsx - Server Component with data fetching
import { Suspense } from 'react';
import { getTeamMembers, getCompanyInfo } from '@/lib/data';

export default async function AboutPage() {
 // Parallel data fetching - both requests run simultaneously
 const [team, companyInfo] = await Promise.all([
 getTeamMembers(),
 getCompanyInfo(),
 ]);
 
 return (
 <main>
 <h1>{companyInfo.name}</h1>
 <p>{companyInfo.description}</p>
 
 <section>
 <h2>Our Team</h2>
 <div className="team-grid">
 {team.map(member => (
 <article key={member.id}>
 <h3>{member.name}</h3>
 <p>{member.role}</p>
 </article>
 ))}
 </div>
 </section>
 </main>
 );
}

Caching Strategies and Revalidation

The caching behavior in Next.js is sophisticated yet configurable. By default, fetched data is cached and reused across requests, providing excellent performance for static content. For dynamic content that changes frequently, you can use options like no-store for fresh data on every request or revalidate to refresh data at specified intervals.

// lib/data.ts - Data fetching with caching strategies

// Static data - cached forever until revalidate
async function getStaticContent() {
 'use cache';
 return db.query('SELECT * FROM pages WHERE static = true');
}

// Dynamic data - fresh on every request
async function getLivePrices() {
 'no-store';
 return fetch('https://api.example.com/prices');
}

// Time-based revalidation - refresh every hour
async function getHourlyStats() {
 revalidate = 3600; // 1 hour
 return fetch('https://api.example.com/stats');
}

Streaming and Suspense

Next.js integrates React's Suspense boundary system to handle loading states gracefully. While data fetches occur, Suspense boundaries display fallback UI like skeletons or loading spinners. Streaming takes this further by progressively sending HTML to the browser, allowing users to see partial content while remaining data loads.

import { Suspense } from 'react';
import PostContent from '@/components/PostContent';
import RelatedPosts from '@/components/RelatedPosts';
import { getPost, getRelatedPosts } from '@/lib/posts';

export default async function BlogPostPage({ params }: { params: { slug: string } }) {
 const post = await getPost(params.slug);
 
 return (
 <article>
 <PostContent post={post} />
 <aside>
 <Suspense fallback={<RelatedPostsSkeleton />}>
 <RelatedPosts currentPostId={post.id} />
 </Suspense>
 </aside>
 </article>
 );
}

This approach significantly improves perceived performance, especially for pages with multiple data dependencies. By streaming content progressively, users can begin engaging with pages before all data has finished loading, creating a more responsive experience.

Routing and Navigation

File-Based Routing System

Next.js App Router uses a file-based routing system where the folder structure directly maps to URL paths. Creating a folder and page.tsx file within the app directory automatically creates a route. Dynamic routes use square brackets like [slug] or [id] to capture URL parameters. This convention-over-configuration approach eliminates routing boilerplate and makes route organization intuitive for developers of any experience level.

Key routing patterns:

// app/services/[slug]/page.tsx - Dynamic route with static generation
import { getServiceBySlug, getAllServices } from '@/lib/services';
import { notFound } from 'next/navigation';

interface Props {
 params: { slug: string };
}

// Generate static params for build-time page generation
export async function generateStaticParams() {
 const services = await getAllServices();
 return services.map(service => ({
 slug: service.slug,
 }));
}

export default async function ServicePage({ params }: Props) {
 const service = await getServiceBySlug(params.slug);
 
 if (!service) {
 notFound();
 }
 
 return (
 <main>
 <h1>{service.title}</h1>
 <p>{service.description}</p>
 </main>
 );
}

Nested Layouts and Route Groups

Route groups in Next.js allow you to organize routes into logical groups without affecting the URL structure. By wrapping folder names in parentheses, you create layout segments that share the same layout while keeping routes logically organized. This feature is particularly useful for applications with multiple sections that require different layouts.

app/
├── (marketing)/ # Route group - no URL impact
│ ├── layout.tsx # Marketing-specific layout
│ ├── page.tsx # /
│ ├── about/
│ │ └── page.tsx # /about
│ └── contact/
│ └── page.tsx # /contact
│
├── (dashboard)/ # Another route group
│ ├── layout.tsx # Dashboard layout with sidebar
│ ├── dashboard/
│ │ └── page.tsx # /dashboard
│ └── settings/
│ └── page.tsx # /dashboard/settings
│
└── api/ # API routes
 └── route.ts # /api/route

Route groups enable you to apply different layouts to different sections of your application. Marketing pages might share a common header and footer, while dashboard pages have a sidebar navigation. This organizational pattern keeps your codebase clean while supporting diverse page layouts within a single application.

Styling and Performance Optimization

CSS and Styling Approaches

Next.js supports multiple styling approaches, including CSS Modules, Tailwind CSS, and CSS-in-JS solutions. CSS Modules provide component-scoped styling by default, preventing class name collisions across the application. Tailwind CSS has become particularly popular with Next.js users due to its utility-first approach that integrates seamlessly with the framework. The choice of styling method depends on team preferences and project requirements, with Next.js providing first-class support for modern CSS features.

// components/Button/Button.module.css
.primary {
 background-color: #0070f3;
 color: white;
 padding: 0.75rem 1.5rem;
 border-radius: 0.5rem;
 transition: background-color 0.2s;
}

.primary:hover {
 background-color: #0051a2;
}

// components/Button/index.tsx
import styles from './Button.module.css';

export default function Button({ children, variant = 'primary' }) {
 return (
 <button className={`${styles.button} ${styles[variant]}`}>
 {children}
 </button>
 );
}

Image and Font Optimization

Next.js includes built-in optimization for images and fonts, which are critical for Core Web Vitals scores. The next/image component automatically generates appropriately sized images in modern formats like WebP and AVIF, lazy-loads images below the fold, and prevents layout shift by reserving space. Similarly, next/font automatically optimizes font loading, eliminating flash of unstyled text and reducing layout shifts from font swapping.

import Image from 'next/image';
import { Inter, Playfair_Display } from 'next/font/google';

// Optimized image component
<Image
 src="/hero.jpg"
 alt="Hero image showing our team at work"
 fill
 priority
 sizes="(max-width: 1200px) 100vw, 1200px"
 style={{ objectFit: 'cover' }}
/>

// Optimized fonts with automatic self-hosting
const inter = Inter({ 
 subsets: ['latin'],
 display: 'swap',
 variable: '--font-inter',
});

const playfair = Playfair_Display({ 
 subsets: ['latin'],
 display: 'swap',
 variable: '--font-playfair',
});

export default function Layout({ children }) {
 return (
 <html lang="en" className={`${inter.variable} ${playfair.variable}`}>
 <body>{children}</body>
 </html>
 );
}

Performance benefits of Next.js optimization:

• Images automatically resized and converted to WebP/AVIF based on browser support
• Fonts self-hosted at build time, eliminating external requests
• Automatic lazy loading for images below the fold
• Layout shift prevention through explicit dimension specifications
• Reduced Cumulative Layout Shift (CLS) scores

These optimizations work together to deliver exceptional Core Web Vitals scores, which directly impact search rankings and user experience metrics.

SEO and Metadata

Dynamic Metadata for SEO

Next.js provides a powerful metadata API that enables dynamic SEO configuration for each page. The metadata object can include titles, descriptions, Open Graph tags, Twitter cards, and other SEO-relevant elements. This metadata is rendered on the server, ensuring search engines see fully populated meta tags without client-side JavaScript execution. The title and description templates support dynamic values for consistent branding across all pages.

Implementing robust SEO strategies from the start is essential for any website project. Our SEO services complement Next.js's built-in optimization features, ensuring your website achieves maximum visibility in search engine results.

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }: Props): Promise<Metadata> {
 const post = await getPost(params.slug);
 
 if (!post) {
 return { title: 'Post Not Found' };
 }
 
 return {
 title: post.title,
 description: post.excerpt,
 openGraph: {
 title: post.title,
 description: post.excerpt,
 images: [{ url: post.coverImage, width: 1200, height: 630 }],
 type: 'article',
 publishedTime: post.date,
 authors: [post.author.name],
 },
 twitter: {
 card: 'summary_large_image',
 title: post.title,
 description: post.excerpt,
 images: [post.coverImage],
 },
 };
}

Structured Data and Canonical URLs

Implementing structured data through JSON-LD helps search engines understand page content, enabling rich results in search listings. Next.js allows injecting script tags with structured data, which should contain only the JSON-LD content without additional attributes. Additionally, proper canonical URLs prevent duplicate content issues and consolidate SEO value.

// components/OrganizationSchema.tsx
export default function OrganizationSchema() {
 const schema = {
 '@context': 'https://schema.org',
 '@type': 'Organization',
 name: 'Digital Thrive',
 url: 'https://digitalthriveai.com',
 logo: 'https://digitalthriveai.com/logo.png',
 sameAs: [
 'https://twitter.com/digitalthrive',
 'https://linkedin.com/company/digitalthrive',
 ],
 contactPoint: {
 '@type': 'ContactPoint',
 telephone: '+1-800-555-0123',
 contactType: 'customer service',
 },
 };

 return (
 <script
 type="application/ld+json"
 dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
 />
 );
}

SEO best practices for Next.js:

• Use the metadata API for all page-level SEO elements
• Implement canonical URLs to prevent duplicate content
• Add structured data for rich search results
• Optimize images with alt text and proper sizing
• Use semantic HTML elements (header, main, footer, article)
• Ensure accessibility with proper ARIA labels
• Generate sitemaps using the built-in sitemap functionality

These practices ensure your Next.js website performs well in search results while providing an excellent experience for all users.

Best Practices for Next.js Development

Error Handling

Next.js provides specialized files for handling errors at different levels of the application. error.tsx creates error boundaries that catch runtime errors in a route segment and display fallback UI. not-found.tsx handles 404 responses when content isn't found, while loading.tsx provides immediate feedback during data fetching. These specialized files work together to create resilient applications that handle unexpected states gracefully.

// app/error.tsx
'use client';

export default function Error({
 error,
 reset,
}: {
 error: Error & { digest?: string };
 reset: () => void;
}) {
 useEffect(() => {
 console.error('Application error:', error);
 }, [error]);

 return (
 <div className="error-container">
 <h2>Something went wrong!</h2>
 <p>We encountered an unexpected error. Please try again.</p>
 <button onClick={() => reset()}>Try again</button>
 </div>
 );
}

// app/not-found.tsx
export default function NotFound() {
 return (
 <div className="not-found">
 <h1>404 - Page Not Found</h1>
 <p>The page you're looking for doesn't exist.</p>
 <a href="/">Return home</a>
 </div>
 );
}

Testing Strategies

Comprehensive testing ensures your Next.js application remains reliable as it evolves. Unit tests verify individual components and functions, integration tests check component interactions, and end-to-end tests validate user flows. The Next.js testing library provides utilities for testing both Server and Client Components.

// __tests__/components/Header.test.tsx
import { render, screen } from '@testing-library/react';
import Header from '@/components/Header';

describe('Header', () => {
 it('renders navigation links', () => {
 render(<Header />);
 
 expect(screen.getByText('About')).toBeInTheDocument();
 expect(screen.getByText('Services')).toBeInTheDocument();
 expect(screen.getByText('Contact')).toBeInTheDocument();
 });
});

Deployment Considerations

Next.js applications can be deployed to various platforms including Vercel (the creators of Next.js), cloud providers like AWS and Google Cloud, or traditional hosting environments. Static exports are possible for content-focused sites, while dynamic applications require server-side rendering capabilities.

For businesses looking to leverage AI capabilities in their web applications, consider exploring our AI automation services that integrate seamlessly with Next.js applications.

Key recommendations:

1. Use Server Components by default, Client Components only when interactivity is needed
2. Implement Suspense boundaries for loading states on all async components
3. Use generateStaticParams for static page generation to improve performance
4. Configure proper caching strategies for data fetches based on content freshness requirements
5. Implement comprehensive error boundaries with error.tsx
6. Use TypeScript for type safety throughout your application
7. Optimize all images with the next/image component
8. Self-host fonts with next/font to prevent layout shift
9. Implement metadata for SEO on every page using the metadata API
10. Set up proper monitoring and error tracking in production

Following these practices will help you build Next.js applications that are performant, maintainable, and ready for production deployment.

Sources

1. Next.js Official Learn Platform - Official Next.js documentation and learning resources
2. UXPin: NextJS vs React Comparison - Comprehensive technical comparison of Next.js and React
3. Strapi: React & Next.js in 2025 - Modern Best Practices - 2025 development best practices
4. LogRocket: Creating a website with Next.js and React - Step-by-step implementation guide