Lazy Panda

Developer

Next.js Static and Dynamic Routing with TypeScript and responsive design with SCSS

After a long work with Angular, I was looking for another library or framework which makes my application faster to load, optimized and robust. After few days of research, I choose Next.js with TypeScript. It is one of the best libraries I have used so far. Next.js build on React, so many of React feature I could leverage here, and with the help of Next.js, my application becomes faster, optimized, and robust too.

In this article, I am going to demonstrate how you can create a responsive & mobile-friendly web design using Next.js with TypeScripe. And it will have the following features -

Dynamic Routing and nested dynamic routing in Next.js.
The responsive mobile-friendly navigation bar using Next.js & Bootstrap 5.
Prerendering for SEO support in Next.js.
Bootstrap & SCSS support with Next.js.
Production-ready Build generation with Next.js.

How it will look like?

Let's start with how I build the above application...

Next.js with TypeScript application creation

Next.js is a React framework build in SSR (Server-side-rendering) or CSR (Client-side-rendering). Whether it’s ensuring all your code is bundled and minimized using a bundler like webpack or implementing optimizations like code splitting to improve page performance, Next.js has all the tools you need. To create your first Next.js application you can follow the post earlier I have written. - How to create your first NextJS application with TypeScript SCSS and Bootstrap v5.0

Dynamic Routing and nested dynamic routing creation

First, let me show you the application routing details, each box represents a page. Arrows represent page navigation.

As you can see from the above image we are having 6 pages and those are built like that way -

/
/books
/books/[category]
/books/[category]/[bookTitle]
/blog
/about

Static Routing - when the page navigation is fixed, that means you know the page name where the application should navigate. From the above example /, /books, /blog, /about all are static routing.

Dynamic Routing - When the page navigation is dynamic, which means you do not know which page user will navigate. From the above example, you do not know which category user is going to choose. It could be /books/tintin OR /books/asterix etc. So this part is dynamic, because of that I defined the root directory as [category]

/books/[category] => /books/tintin, /books/asterix etc

In the same way, you do not know which books the user is going to choose, that route also denied as a dynamic route. /books/[category]/[bookTitle]

Data Source Setup & configuration

In the above example, I did use an Array to full fill my requirement. It looks as follows

import { Books } from "../interface";

const booksArray: Array<Books> = [

{

category: 'tintin',

categoryTitle: 'Tintin',

description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",

id: 1,

books: [

{

id: 10,

bookTitle: 'Destination-moon',

coverPage: './public/a.jpeg',

{

id: 11,

bookTitle: 'DEF',

coverPage: './public/b.jpeg',

}

]

}

];

export default booksArray;

Based on the above data source, I am going to create all routing paths and props for my page as well. We depend on below two feature provided by the Next.js

getStaticPaths() & getStaticProps() both the method calls during compilation time.

/book/tintin Path creation & get the props for this page -

export const getStaticPaths: GetStaticPaths = async () => {

const paths = booksArray.map((book) => ({

params: { category: book.category }

}))

return { paths, fallback: false }

}

export const getStaticProps: GetStaticProps = async ({ params }) => {

try {

const category = params?.category

const item = booksArray.find((data) => data.category === category)

return { props: { item } }

} catch (err) {

return { props: { errors: err.message } }

}

/books/tintin/Destination-moon Path creation & get the props for this page -

export const getStaticPaths: GetStaticPaths = async () => {

const paths = [];

const categories = booksArray.map(books => books.category);

const bookName = booksArray.map(books => books.books.map(book => book.bookTitle));

categories.forEach((element, row) => {

bookName[row].map(book => {

const data = {

params: {

category: element,

bookTitle: book

}

paths.push(data);

});

return { paths, fallback: false }

}

export const getStaticProps: GetStaticProps = async ({ params }) => {

try {

const category = params?.category;

const bookTitle = params?.bookTitle;

const categoryObj = booksArray.find((data) => data.category === category);

const item = categoryObj.books.find(data => data.bookTitle === bookTitle);

return { props: { item } };

} catch (err) {

return { props: { errors: err.message } }

}

Based on the above configuration, you will be able to generate all dynamic page routing and provide proper props for your page.

Demo Time:

Next.js App Build & Prerender support

Once your code is being ready, you can build and export the application. For that, you can modify the package.json file accordingly.

"scripts": {

"dev": "next dev",

"dev": "next dev -p 3001",

"build": "next build && next export && http-server -a localhost -p 3001 ./out",

"start": "next start"

The next export command will generate a prebuild static HTML file for you, and it is very SEO-friendly. You can take the /out folder content and do static web hosting.

During build time, if you found the images are not compiling, you do need to create a next.config.js file, there you need to define loader.

module.exports = {

images: {

loader: 'imgix',

path: 'http://localhost:3000/',

}

Hope you can now build your static or dynamic routing as you need. Please mind to comments below for any suggestions.

Happy Exploring!

- Lazy Panda