|
1 | | -# NextJS15-React19-Training-InstillLearning |
2 | | -```console |
3 | | -Step 1: Create new Next.js App using create-next-app |
4 | | -$ npx create-next-app@latest |
5 | | - |
6 | | -✔ What is your project named? … my-app |
7 | | -✔ Would you like to use TypeScript? … No |
8 | | -✔ Would you like to use ESLint? … Yes |
9 | | -✔ Would you like to use Tailwind CSS? … No |
10 | | -✔ Would you like your code inside a `src/` directory? … Yes |
11 | | -✔ Would you like to use App Router? (recommended) … Yes |
12 | | -✔ Would you like to use Turbopack for next dev? … Yes |
13 | | -✔ Would you like to customize the import alias (@/* by default)? … No |
14 | | - |
15 | | -Here is the package.json, when app created: |
16 | | -``` |
17 | | -```json |
18 | | -{ |
19 | | - "name": "my-app", |
20 | | - "version": "0.1.0", |
21 | | - "private": true, |
22 | | - "scripts": { |
23 | | - "dev": "next dev --turbopack", |
24 | | - "build": "next build", |
25 | | - "start": "next start", |
26 | | - "lint": "next lint" |
27 | | - }, |
28 | | - "dependencies": { |
29 | | - "react": "^19.0.0", |
30 | | - "react-dom": "^19.0.0", |
31 | | - "next": "15.0.4" |
32 | | - }, |
33 | | - "devDependencies": { |
34 | | - "eslint": "^8", |
35 | | - "eslint-config-next": "15.0.4" |
36 | | - } |
37 | | -} |
| 1 | +## Next.js App Router Course - Starter - https://nextjs.org/learn/dashboard-app |
| 2 | +This is the starter template for the Next.js App Router Course. It contains the starting code for the dashboard application. |
| 3 | + |
| 4 | + |
| 5 | +### Creating a new project |
| 6 | +#### install npmp (as it is faster than npm and yarn) |
| 7 | +```shell |
| 8 | +$ npm install -g pnpm |
38 | 9 | ``` |
39 | 10 |
|
40 | | -```console |
41 | | -Step 2: Run the app |
42 | | -$ cd my-app |
43 | | -$ npm run dev |
| 11 | +#### create starting app using create-next-app |
| 12 | +```shell |
| 13 | +$ npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm |
| 14 | + |
| 15 | +$ cd nextjs-dashboard |
44 | 16 | ``` |
45 | | - |
| 17 | +## Folder Structure |
| 18 | + |
| 19 | +- **`/app`** |
| 20 | + Contains all the routes, components, and logic for your application. This is where you'll be working most of the time. |
| 21 | + |
| 22 | +- **`/app/lib`** |
| 23 | + Contains functions used in your application, such as reusable utility functions and data fetching functions. |
| 24 | + |
| 25 | +- **`/app/ui`** |
| 26 | + Contains all the UI components for your application, such as cards, tables, and forms. These components are pre-styled to save development time. |
| 27 | + |
| 28 | +- **`/public`** |
| 29 | + Contains all the static assets for your application, such as images. |
| 30 | + |
| 31 | +- **Config Files** |
| 32 | + At the root of your application, you'll find config files like `next.config.js`. These files are created and pre-configured when you start a new project using `create-next-app`. |
| 33 | + |
| 34 | + |
| 35 | +## Dependencies and Their Uses |
| 36 | + |
| 37 | +### Dependencies |
| 38 | +1. **`@heroicons/react`** |
| 39 | + A library of free SVG icons designed for React. Useful for adding consistent and visually appealing icons to your application. |
| 40 | + |
| 41 | +2. **`@tailwindcss/forms`** |
| 42 | + A Tailwind CSS plugin that provides better default styling for form elements like inputs, selects, and buttons, making forms look more consistent and polished. |
| 43 | + |
| 44 | +3. **`@vercel/postgres`** |
| 45 | + A library to interact with PostgreSQL databases directly, optimized for serverless environments on Vercel. Perfect for integrating database operations in your Next.js app. |
| 46 | + |
| 47 | +4. **`autoprefixer`** |
| 48 | + A PostCSS plugin that automatically adds vendor prefixes to your CSS, ensuring compatibility across different browsers. |
| 49 | + |
| 50 | +5. **`bcrypt`** |
| 51 | + A library for hashing passwords securely. Commonly used for user authentication and securely storing passwords in the database. |
| 52 | + |
| 53 | +6. **`clsx`** |
| 54 | + A small utility for conditionally joining class names. Useful for dynamically applying CSS classes in React components. |
| 55 | + |
| 56 | +7. **`next`** |
| 57 | + The Next.js framework itself. Provides features like server-side rendering, static site generation, API routes, and more. |
| 58 | + |
| 59 | +8. **`next-auth`** |
| 60 | + A library to manage authentication in your Next.js app. Supports various providers like Google, GitHub, email/password, and custom credentials. |
| 61 | + |
| 62 | +9. **`postcss`** |
| 63 | + A CSS processor that transforms styles with plugins. Tailwind CSS uses it internally for processing your CSS. |
| 64 | + |
| 65 | +10. **`react`** |
| 66 | + The core library for building user interfaces in a declarative way. |
| 67 | + |
| 68 | +11. **`react-dom`** |
| 69 | + Provides DOM-specific methods for React. Used to render React components to the DOM. |
| 70 | + |
| 71 | +12. **`tailwindcss`** |
| 72 | + A utility-first CSS framework for building modern, responsive designs efficiently. |
| 73 | + |
| 74 | +13. **`typescript`** |
| 75 | + A superset of JavaScript that adds static typing, making your code more robust and less prone to errors. |
| 76 | + |
| 77 | +14. **`use-debounce`** |
| 78 | + A React hook for debouncing values or functions. Useful for improving performance in search inputs or API calls by reducing the frequency of executions. |
| 79 | + |
| 80 | +15. **`zod`** |
| 81 | + A TypeScript-first schema validation library. Useful for validating and parsing data, ensuring type safety. |
| 82 | + |
| 83 | +--- |
| 84 | + |
| 85 | +### DevDependencies |
| 86 | +1. **`@types/bcrypt`** |
| 87 | + Type definitions for the `bcrypt` library, providing IntelliSense and type-checking in TypeScript. |
| 88 | + |
| 89 | +2. **`@types/node`** |
| 90 | + Type definitions for Node.js, helping with type safety and IntelliSense when working with Node.js APIs. |
| 91 | + |
| 92 | +3. **`@types/react`** |
| 93 | + Type definitions for React, ensuring proper type support for React components and hooks in TypeScript. |
| 94 | + |
| 95 | +4. **`@types/react-dom`** |
| 96 | + Type definitions for `react-dom`, enabling type safety for React's DOM rendering APIs in TypeScript. |
| 97 | + |
| 98 | +--- |
| 99 | + |
| 100 | +### How These Work Together |
| 101 | +- **Styling:** |
| 102 | + `tailwindcss`, `autoprefixer`, and `@tailwindcss/forms` handle styling, ensuring modern and responsive designs. |
| 103 | + |
| 104 | +- **Authentication and Security:** |
| 105 | + `bcrypt` and `next-auth` handle secure password hashing and user authentication. |
| 106 | + |
| 107 | +- **Database and Backend:** |
| 108 | + `@vercel/postgres` integrates database operations seamlessly with Vercel. |
| 109 | + |
| 110 | +- **React Ecosystem:** |
| 111 | + `react`, `react-dom`, and `clsx` support the core UI functionality, while `@heroicons/react` adds icons. |
| 112 | + |
| 113 | +- **Validation and Performance:** |
| 114 | + `zod` ensures data integrity, and `use-debounce` optimizes performance. |
| 115 | + |
| 116 | +- **TypeScript:** |
| 117 | + `typescript` and related `@types/*` packages provide type safety and improved developer experience. |
| 118 | + |
| 119 | +This setup offers a robust foundation for building a modern, scalable, and secure Next.js application. |
0 commit comments