steps.md

Steps to setup Next.js App

NOTE: Make sure that you have setup your coding environment before following the steps below.

💡 Alternatively, you can also easily setup your environment using GitHub Codespaces to setup your environment in seconds and get going.

Index

• Creating your first Next.js app
  • Choosing how to style your app
    • Material-UI
    • Tailwind CSS
  • Choosing a backend (Database)

---

The following steps are optional

Creating your first Next.js app

Create your first Next.js app by running the following command:

npx create-next-app <app-name>

Replacing <app-name> with the name of your app.

Choosing how to style your app

Two popular ways to style your app are by using:

• Material UI
• Tailwind CSS

Material-UI

Material-UI is a React UI library for building user interfaces.

You can add Material-UI and Material Icons to your project by running the following command:

npm install @mui/material @emotion/react @emotion/styled @mui/icons-material

Tailwind CSS

Tailwind CSS is a utility-first CSS framework for styled-components.

To add Tailwind CSS to your project, run the following command:

npm install -D tailwindcss postcss autoprefixer

Initialize Tailwind CSS by running the following command:

npx tailwindcss init -p

Initializing tailwindcss will create a tailwind.config.js file in your project. By default, Tailwind CSS will watch only html files in your project.
You can extend the default configuration by adding your own customizations to the tailwind.config.js file and editing the content property like so:

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Finally, add the following Taiwind directives to your CSS file:

./styles/globals.css:

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

---

If you are a beginner, using Material-UI is a good starting point.
For more advanced use cases where more control is needed, Tailwind CSS is a good option.

---

Choosing a backend (Database)

When it comes to building a backend for your app, you need to decide which database you want to use.

A few popular databases/backend solutions are:

• MongoDB
• PostgreSQL
• MySQL
• Firebase
• Firestore
• GraphQL
• Apollo
• Relay

And many many more.

Firebase is a good place to start. Firebase is commonly referred to as "Backend as a Service" (BaaS).
Firebase provides you with virtually everything you need to build a backend for your app from user authentication, storage, and realtime database. It automatically scales to meet your needs and has a very generous free plan.

Thats it! You can now start building your app.

Navigate to your project directory and run the following command to start the development server:

npm run dev