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 -
Bootstrap v5.0 integration
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.
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:
your code will be running on a different port now. Now convert the application into TypeScript manually.
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.
For prettier, install npm i prettier --save-dev you can pass the rules in the package.json file as well.
By default, next.js application creates with CSS, let's rename .css to .scss file and we will add SCSS support as well.
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.
To incorporate Bootstrap v5, you need to install npm i bootstrap@next and import the bootstrap file into global.scss file.
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.
That’s all! Now you can start building an awesome app using Next.js.