⚙️Next.js setup

getting ourselves ready with Next.js

On this page, we will have Next.js setup with only

• npm commands on the Terminal

• VS Code

Installation

• Create a new folder on your local machine

• In Terminal, enter the following:

npm init -y

• Then, install React + TypeScript + Next:

npm install --save react react-dom typescript next

• Then, in package.json:

...
"scripts": {
    "dev": "next dev",
    "build": "next build", 
    "start": "next start",
    "lint": "next lint"
}
...

Folders

• Create a folder called app at the root level of the project folder

Public folder (optional)

• Create a folder called public also at the root level to store static assets

  • we can then refer a file such as public/logo.png as simply /logo.png

Tailwind (optional)

• Optionally, we could also install Tailwind CSS, a styling framework with these instructions, i.e.

npm install -D tailwindcss postcss autoprefixer

• Configure Tailwind with the file:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

• In the app folder, add a global.css file:

app/global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

• Start the Tailwind CLI build process in Terminal

npx tailwindcss init -p

We will test the Tailwind styles in the next page when we build our first page!