Building a Single-Page Application with Next.js, NextUI, React Router, and TypeScript

In this blog post, we'll explore how to create a single-page application (SPA) using a powerful combination of Next.js, NextUI, React Router, and TypeScript. This setup allows you to leverage the strengths of each technology to build a modern, type-safe, and visually appealing web application.

Introduction

Why Next.js?

Next.js is a popular React framework that provides features like server-side rendering and static site generation. However, it can also be configured to work as a single-page application, making it a versatile choice for various use cases.

Why NextUI?

NextUI is a UI library that offers a set of beautiful and customizable components, making it easy to create visually appealing interfaces.

Why React Router?

React Router is a widely-used library for client-side routing in React applications. It allows you to manage navigation and rendering of components based on the URL.

Why TypeScript?

TypeScript adds type safety to your JavaScript code, helping you catch errors early and improve code quality.

Setting Up the Project

To get started, create a new Next.js project with TypeScript support and install the necessary packages:

Bash
1npx create-next-app@latest my-nextjs-spa --typescript
2cd my-nextjs-spa
3npm install @nextui-org/react react-router-dom @types/react-router-dom
4

Configuring React Router

Next.js has its own routing system, but for an SPA, we'll use React Router to handle client-side navigation. Wrap your application with the BrowserRouter in a custom _app.tsx file:

Tsx
1// pages/_app.tsx
2import { AppProps } from 'next/app';
3import { NextUIProvider } from '@nextui-org/react';
4import { BrowserRouter as Router } from 'react-router-dom';
5
6function MyApp({ Component, pageProps }: AppProps) {
7  return (
8    <NextUIProvider>
9      <Router>
10        <Component {...pageProps} />
11      </Router>
12    </NextUIProvider>
13  );
14}
15
16export default MyApp;
17

Defining Routes

Create a routes.tsx file to define your application's routes using React Router:

Tsx
1// routes.tsx
2import React from 'react';
3import { Route, Routes } from 'react-router-dom';
4import Home from './pages/home';
5import About from './pages/about';
6
7const AppRoutes: React.FC = () => {
8  return (
9    <Routes>
10      <Route path="/" element={<Home />} />
11      <Route path="/about" element={<About />} />
12    </Routes>
13  );
14};
15
16export default AppRoutes;
17

Creating Example Pages

Create home.tsx and about.tsx in the pages directory to serve as example pages:

Tsx
1// pages/home.tsx
2import React from 'react';
3
4const Home: React.FC = () => {
5  return <h1>Home Page</h1>;
6};
7
8export default Home;
9

Tsx
1// pages/about.tsx
2import React from 'react';
3
4const About: React.FC = () => {
5  return <h1>About Page</h1>;
6};
7
8export default About;
9

Integrating NextUI Components

Enhance your pages with NextUI components for a polished look:

Tsx
1// pages/home.tsx
2import React from 'react';
3import { Button } from '@nextui-org/react';
4
5const Home: React.FC = () => {
6  return (
7    <div>
8      <h1>Home Page</h1>
9      <Button>Click Me</Button>
10    </div>
11  );
12};
13
14export default Home;
15

Running the Application

Start the development server and test your SPA:

Bash
1npm run dev
2

Open your browser and navigate