Setting Up a Next.js Project With TypeScript, Sass, and Jest

Photo by Goran Ivos on Unsplash

Next.js is a React framework for building production-ready websites with a number of features, such as SSR, static exporting, requiring zero setup, and many more.

This story is the first part of a bigger story, where we learn how to create a to-do application using Prisma.

The reason I have chosen Next.js is that it has a lot of flexibility. You can easily add many different add-ons (Jest, Sass, server-side development) with minimal configuration hassle and make the application still perform well with server-side rendering.

You can easily create a front end application and convert it to a full stack application.

Let’s Get Started

The first thing we need to do is create a project folder called todo-projectname and open it with Visual Studio Code.

mkdir todo-projectname

Let’s install react, react-dom and next.

npm init -y
npm install -save react react-dom next

Now, we need to create a pages folder which the pages will run from.

mkdir pages

The next step is to try and create our first page. Inside that folder, create the index.js file and copy the following code.

It’s time to test our first Next.js page. Run the following on the console:

npm run dev

Load the following on your browser http://localhost:3000 and you should be able to see our Hello World.

Adding TypeScript Support

These first steps were only for setting up our environment.

What we want to do next is add TypeScript. To do so, we will have to add a few files and make some changes to our boilerplate.

In the root folder, create a file called next.config.js.

Now, you’ll need to install a package for the support of TypeScript in your project.

On the console, run the following:

npm install --save @zeit/next-typescript

Inside that file, copy the following code:

const withTypescript = require('@zeit/next-typescript')
module.exports = withTypescript()

Create a .babelrc file in the root folder and add the following configuration code:

Note that we don't need to add the tsconfig at all because we’ve added the .babelrc.

Finally, we will replace the index.jsx with our TypeScript implementation:

You will have the same output, but this time it will be a bolder (because we use H1) Hello World!

You now have a TypeScript-based Next.js boilerplate.

Adding Sass

If you would like to create components that use Sass, we can easily do this with Next.js.

To do so, we need to install another package. Using our console, we can do this by running the following:

npm install --save @zeit/next-sass

Then we will need to make some changes inside our next.config.js.

We will also have to modify our index.tsx file to make our H1 blue.

To do so, we will make the following two changes as highlighted below:

We will need to add the index.scss in the route of our folder:

.example {
  color: blue;
}

Note that, every time you make a change to the next.config.js, you will need to restart your server. Use CTRL+ C to restart and then run npm run dev again.

You should now be able to see the blue color on your H1.

Adding Testing With Jest

The next step is to add testing with Jest. You can follow the instructions from Miin’s article.

In our project, we will need to make some changes. Some of the configurations don't work anymore and I had to add some changes to fix this.

We need to install the following packages:

npm install --save-dev jest babel-jest babel-core babel-preset-env babel-preset-react

Then change our package.json to add the test scripts:

"scripts": { 
      "test": "jest", 
      "test:watch": "jest — watch", 
      "test:coverage": "jest — coverage"
},

Next, let’s install the Enzyme testing library:

npm install --save-dev enzyme enzyme-adapter-react-16

As we chose to write in TypeScript, we also need to install:

npm install --save-dev typescript ts-jest @types/enzyme @types/enzyme-adapter-react-16 @types/jest

Additionally, with Jest, we also need to set up a configuration file for Jest and a configuration file for TypeScript and Jest.

jest.tsconfig.json:

And jest.config.js:

You will need to make some changes to the package.json file — add the following:

For this, you will need to create a folder called __mocks__ and add two files inside it:

//__mocks__/fileMock.js
module.exports = 'test-file-stub';

And:

//__mocks__/stylesMock.js
module.exports = {};

Then, we will need to add the enzyme.js file in the root of our folder and add the following code.

In some other examples, I have seen it added at the top of each of the tests, but by doing the following it will be included without having to add it.

const Adapter = require('enzyme-adapter-react-16')
require('enzyme').configure({adapter: new Adapter()})

Now create a __tests__ folder, and add the following example test file index.spec.tsx.

You can run the test using the following command on the terminal:

npm run test

It worked and it is great!

Full Repo

You can find the full repo here:

arismarko/nexttsboiler

Thanks for reading!