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

Creating a single-page application (SPA) can be a rewarding experience, especially when using a powerful stack like Next.js, NextUI, React Router, and TypeScript. This combination offers a robust framework, beautiful UI components, seamless client-side navigation, and type safety. In this guide, we'll walk through the process of setting up an SPA using these technologies.

Why Choose This Stack?

• Next.js: A popular React framework that supports server-side rendering and static site generation, making it ideal for building fast and SEO-friendly applications.
• NextUI: A modern UI library that provides a set of beautiful and customizable components to enhance your application's appearance.
• React Router: A widely-used library for managing client-side routing in React applications, allowing for smooth navigation without page reloads.
• TypeScript: A superset of JavaScript that adds static types, helping you catch errors early and improve code quality.

Setting Up the Project

First, let's 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 uses its own routing system, but for an SPA, we'll use React Router to handle client-side navigation. We'll wrap our application with the BrowserRouter component 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

Let's create some example pages to demonstrate navigation. Add home.tsx and about.tsx in the pages directory.

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 see your SPA in action.

Bash
1npm run dev
2