Lazy Panda

Developer

Posts
57
Comments
48
Likes
76
Posts
57
Comments
48
Likes
76
sidebar

How to create your first NextJS application with TypeScript SCSS and Bootstrap v5.0

Next.js is a React-based framework for Production. By default, it does not provide TypeScript support. It requires few simple steps to make TypeScript enabled. An easy, elegant, and quick step-by-step guide to boost the foundation of your app. 

What is covered in this article -

  1. Setup Next.js with TypeScript
  2. Setup Prettier
  3. Setup Next.js with SCSS support module
  4. Bootstrap v5.0 integration

 

Setup Next.js with TypeScript

First, you do need Node and npm installed on your computer. You need to run the generator of the next application, I am going to use npm instead of yarn. 

npx create-next-app first-next-app

 

 

Once done, go inside the project using cd first-next-app, and run npm run dev. 

To run your application in a different port, open the package.json file and update the dev command like as follows:

{

"name": "first-next-app",

"version": "0.1.0",

"private": true,

"scripts": {

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

"build": "next build",

"start": "next start"

},

"dependencies": {

"next": "10.0.9",

"react": "17.0.2",

"react-dom": "17.0.2"

}

}

 

your code will be running on a different port now. Now convert the application into TypeScript manually.

  • Convert all .js file to .tsx file extension
  • Create tsconfig.json file using touch tsconfig.json command
  • Install npm packages for TypeScript npm i -DE typescript @types/react @types/node
  • Run the application again npm run dev

You will need to do this for each file in your page's directory and any subdirectories. Any subsequent components you add will also need to have the .tsx file extension.

 


Setup Prettier

For prettier, install npm i prettier --save-dev you can pass the rules in the package.json file as well.

{

"name": "first-next-app",

"version": "0.1.0",

"private": true,

"scripts": {

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

"build": "next build",

"start": "next start"

},

"dependencies": {

"next": "10.0.9",

"react": "17.0.2",

"react-dom": "17.0.2"

},

"devDependencies": {

"@types/node": "14.14.37",

"@types/react": "17.0.3",

"prettier": "^2.2.1",

"typescript": "4.2.3"

},

"prettier": {

"trailingComma": "es5",

"tabWidth": 2,

"semi": true,

"bracketSpacing": true,

"jsxBracketSameLine": true,

"arrowParens": "avoid",

"singleQuote": true

}

}

 

 


Setup Next.js with SCSS support module

By default, next.js application creates with CSS, let's rename .css to .scss file and we will add SCSS support as well. 

  • Install @zeit/next-sass package - npm i @zeit/next-sass
  • Insatll  npm i node-sass webpack@4.20.2 webpack-dev-server html-webpack-plugin --save-dev
  • Change .css extension to .scss extension under styles folder as well as the import value in _app.tsx & index.tsx file.
  • Create next.config.js file using touch next.config.ts

const withSass = require('@zeit/next-sass');

 

const config = {

pageExtensions: ['js', 'jsx', 'ts', 'tsx'],

};

 

module.exports = withSass(config);

 

Let's verify SCSS support. 

 - Create one new file, _variables.scss and define $bg_color with some value, here I am using light gray '#D3D3D3'. Then import the file in Home.module.scss file and modify the background css property with the variable name.

 

 


Bootstrap v5.0 integration

To incorporate Bootstrap v5, you need to install npm i bootstrap@next and import the bootstrap file into global.scss file.

@import "../node_modules/bootstrap/scss/bootstrap";

That's all so far. It's really easy right. Once you have done all changes, run npm run dev and I believe you should get bootstrap is working properly along with you all scss files.

next with typescript with bootstrap v5

 

That’s all! Now you can start building an awesome app using Next.js.

- LP