Portfolio Project Club: Setting up a NextJS app
Daniel Afonso —
Hey everyone, this is the first blog post about the technical implementation regarding the
ShareYourContent app for the Portfolio Project Club.
This app will include the following things: Next.js, Tailwind CSS, TypeScript, React Testing Library and Cypress.
Next.js and Tailwind CSS template
For starting we’ll be using the Next.js + Tailwind CSS Example. To install it do the following:
yarn create next-app --example with-tailwindcss with-tailwindcss-app
This template comes with Tailwind CSS out of the box so you don’t need to worry about configuring it, its ready to use!
Adding TypeScript to a Next.js app is simple. Firstly we need to install TypeScript and its typings.
npm install --save-dev typescript
npm install --save-dev @types/react @types/react-dom @types/node
Now that it’s installed you can rename every
.js file to
After doing so, if you run
next dev then you’ll see that Next.js will automatically create a
next-env.d.ts files for you to configure if you want so.
Add React Testing Library
Speaking about testing, before anything else we need to install jest.
npm i -D babel-jest jest
To make sure that you can rust jest in your app, then we need to create a
.babelrc file in the root of your project and add the following:
Now we can install the React Testing Library
npm i -D @testing-library/react @testing-library/jest-dom
This should allow you to run tests in your application. To make sure that you can use jest-dom matchers and load your tests from the pages folder then you need to add the following to your
"moduleDirectories": ["node_modules", "pages"]
Adding Cypress and Cypress Testing Library
To install Cypress run the following command:
npm install --save-dev cypress
After this, Cypress should be installed in your app and ready to use. To make sure that we have better queries for Cypress let us install the Cypress Testing Library.
npm install --save-dev @testing-library/cypress
After doing so, we need to make sure that Cypress knows how to use the custom queries. So inside of our Cypress folder called
support edit the
index.js file and add the following:
Now you can use the Cypress Testing Library.
If you want to know more about the Portfolio Project Club here is my first vlog about it.