nextjs-demo-questions.md

• Examine package.json file, and answer the following questions:
  • What is the scripts section?
  • What could the dependencies be?
• How many ways we can style an element in react?
• Why do we use className instead of class in JSX?
• In page.tsx we've used useState in line 6. What does it mean?

1.1. What is the scripts section?:
a. "dev": This script runs the command "next dev". It is typically used for starting the development server for the Next.js application.
1.2. What could the dependencies be?
"@types/node": This package provides TypeScript type definitions for Node.js.

"@types/react": This package provides TypeScript type definitions for React.

"@types/react-dom": This package provides TypeScript type definitions for ReactDOM.

"autoprefixer": This package is used by PostCSS to automatically add vendor prefixes to CSS rules.

"eslint": This package is a popular JavaScript linter that helps identify and fix common coding errors.

"eslint-config-next": This package provides ESLint configuration specifically tailored for Next.js projects.

"next": This package is the framework for building server-rendered React applications. It provides features like server-side rendering, routing, and more.

"postcss": This package is a tool for transforming CSS with JavaScript plugins.

"react": This package is the JavaScript library for building user interfaces. It is the core dependency for React applications.

"react-dom": This package provides the ReactDOM module for rendering React components in the browser.

"tailwindcss": This package is a highly customizable CSS framework that provides utility classes for building user interfaces.

"typescript": This package is the TypeScript programming language itself. It provides tools for type-checking and compiling TypeScript code.
b. "build": This script runs the command "next build". It is used to build the Next.js application for production deployment.

c. "start": This script runs the command "next start". It is used to start the production server for the Next.js application.

e. "lint": This script runs the command "next lint". It is used to run the linting process on the Next.js application code.

2. Inline Styles, CSS Modules, CSS-in-JS Libraries like styled-components, Emotion, and Glamorous, CSS Frameworks like tailwind and bootstrap

3. Because the class is a reserved keyword in JavaScript. JSX is a syntax extension used in React to write HTML-like code within JavaScript.

4. State is a way to store and manage data that can change over time. By using the useState hook, you can define state variables and their corresponding setter functions.