Getting started with NextJS fundamental
#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
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.
#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
#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.
#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