Next.js Series

Code your Own Web App

This repository is a reference as part of the Coding your own Web App Series.

Where you will be creating your very own Web App using Next.js (React Framework by Vercel), a server-side React (JavaScript framework) framework.

To know more about the steps to setup the necessary stuff for the session, you can check out the steps.md file to know more.

---

Index

• Setting up the coding environment
  • Node.js
  • Browser
  • Visual Studio Code (VS Code)
    • Recommended extensions:
    • Next.js Extension Pack
  • Setting up your Web App:

(More details on how to setup your Next.js app in the steps.md file)

---

Setting up the coding environment

Node.js

Node.js (nodejs.org)

Download | Node.js (nodejs.org)

Verify the installation of node and npm on your system by running the following commands in your terminal:

node -v

npm -v

Browser

You can use any browser of your choice.
(Preferably a Chromium-based browser i.e. Google Chrome, Microsoft Edge, Opera, Brave, etc.)

It is recommended to download the React Developer Tools Chrome Extension

Visual Studio Code (VS Code)

Setting up Visual Studio Code

Recommended extensions:

All the extensions above can be installed all at once by adding the following extension pack:

Next.js Extension Pack

The list of extensions are also listed below incase you wish to download certain ones only.

• Auto Close Tag: Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text
• Auto Rename Tag: Auto rename paired HTML/XML tag
• Better Comments: The Better Comments extension will help you create more human-friendly comments in your code
• Bookmarks: It helps you to navigate in your code, moving between important positions easily and quickly.
• DotENV: Support for dotenv file syntax
• Git Graph: View a Git Graph of your repository, and perform Git actions from the graph.
• GitLens --- Git supercharged: Supercharge the Git capabilities built into Visual Studio Code --- Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more
• ESLint: Integrates ESLint JavaScript into VS Code.
• Next.js snippets: snippets for nextjs
• Prettier - Code formatter: Code formatter using prettier
• Sort JSON objects: Sorts the keys within JSON objects
• Template String Converter: Converts quotes to backticks when a $ and { are entered within quotes in JavaScript and TypeScript files
• Thunder Client: Rest API Client for VS Code, GUI based Http Client
• Todo Tree: Show TODO, FIXME, etc. comment tags in a tree view
• Toggle Quotes: cmd ' (ctrl ' on win/linux) will cycle the first quote pair found
• Material-UI Snippets: Snippets for Material-UI
• ES7 React/Redux/React-Native/JS Snippets: Snippets for creating react components and much more

---

Setting up your Web App:

(More details in the steps.md file)

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