#Before we code

Next.js is a powerful React framework that enables you to build production-ready applications with features like server-side rendering, static site generation, and API routes right out of the box. You can find the official documentation here

nextjs.org

Next.js Docs | Next.js

Welcome to the Next.js Documentation.

Whether you’re starting a new project or scaling an existing application, Next.js provides the tools to build a modern, efficient web application quickly and easily. Keep reading to see how we’re using Next.js with TypeScript, Storybook, Sass, and a robust testing setup.

---

#Create next application using typescript

First, we use npx cli to create nextjs application. To get started, open your terminal and run

Here are my preferences.

nextjs.org

CLI: create-next-app | Next.js

Create Next.js apps using one command with the create-next-app CLI.

---

#Add storybook for easy components access

One thing I usually struggle is to show non-engineers on how each component works. Storybook is a powerful tool for building UI components in isolation, making it easier to develop, test, and document your components independently of your main application. In this approach, almost everyone in the team can understand and be on the same page. To set it up, simply run the following command:

Once the installation is complete, you’ll see an output like this:

After the installation, you can start Storybook by running:

For more details on getting started with Storybook and its features, visit the official Storybook documentation

storybook.js.org

Storybook: Frontend workshop for UI development

Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It's open source and free.

---

#Add sass for scss modules

You may have option with styling. The reason I chose scss is the speed and flexibility of creativity. Sass is a popular CSS preprocessor that allows you to write cleaner, more maintainable styles using features like variables, nested rules, and mixins. scss has simply more ways to address styling in current approach. To integrate Sass into your project for SCSS modules, simply run:

Once Sass is installed, you can rename your style files to .module.scss and import them directly into your components. This setup ensures your styles are modular and scoped to the components they belong to, keeping your CSS clean and manageable.

sass-lang.com

Sass: Documentation

Syntactically Awesome Style Sheets

---

#Testing

#Installed Jest and Babel

Need to be added jest, babel-jest, babel/core, and the relevant Babel presets (babel/preset-env, babel/preset-react, babel/preset-typescript). This gives you the testing framework (Jest) plus a way to transform React/TypeScript code in your tests (Babel).

#Created a Dedicated Babel Config for Testing

Then, we placed a file named babel-jest.config.js with the following presets:

This ensures .ts/.tsx files with JSX are properly transpiled by Babel during tests.

#Added a Jest Config (jest.config.js)

We created a jest.config.js instructing Jest to:

• Use "jsdom" as the test environment (so React DOM APIs work).
• Transform all .js/.jsx/.ts/.tsx files with babel-jest using custom Babel config:

#Verify with pnpm run test

We can ran pnpm run test and confirmed React/TypeScript tests (.test.tsx) can import components with JSX and the test suite passed successfully. Make sure to have the following in the package.json