Documentation

[Surti99]

Initialization:

• Put in command npx create-next-app@latest nextjs-dashboard --use-npm --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" -this command is how your start up a server. npx create-next-app@latest
• To run the development server npm run dev

Adding Global Styles:

• Located the global.css file within the /app/ui directory. This CSS file is used for declaring global styles applicable throughout the application.
• Imported the global.css file in the RootLayout component to ensure that these styles are loaded at the top level of the application:

Understanding Tailwind CSS Integration:

• Tailwind is a utility-first CSS framework that facilitates the rapid development of UI components. It allows developers to write CSS directly in their markup, significantly speeding up the styling process.
• With Tailwind, elements are styled by applying utility classes. For instance,<h1 className="text-blue-500">I'm blue!</h1> will render blue text for the <h1> element.
• Advantages of using Tailwind include the avoidance of style collisions, ease of element-specific styling modifications, and prevention of CSS bundle size growth as the application scales.
• When starting a new project with create-next-app, you can opt to include Tailwind, which will be automatically configured in your Next.js application.

Optimizing Fonts and Images:

• Next.js Optimization: Using next/font, Next.js optimizes fonts by downloading font files at build time and hosting them with other static assets, eliminating additional network requests.

- Technical Steps: Created fonts.ts in /app/ui to manage font imports. Imported Inter font and specified subsets. Applied Inter font to in /app/layout.tsx.

Creating the Dashboard Layout:

• A new layout.tsx file was created within the dashboard folder to establish a shared layout across the dashboard pages.
• The layout features a component and is designed to house any dashboard-related pages as children.
• Understanding Partial Rendering and Root Layout:
• Partial Rendering: When navigating between pages under the same layout, only the page components are swapped out, and the layout itself does not re-render.
• Root Layout: The /app/layout.tsx file serves as the root layout that is common across all pages in your application. It currently includes global CSS, the Inter font, and modifications to the and tags.

[Surti99]

Roles of Django and Next.js

Django (Backend Framework) Main Uses:

• Managing database models and migrations.
• Processing requests and returning responses.
• Serving API endpoints for the frontend to consume.

Next.js (Frontend Framework)

• Server-Side Rendering (SSR): Renders pages on the server for faster initial loads and improved SEO.
• Static Site Generation (SSG): Generates HTML at build time, improving load times and scalability.
• Optimized for performance and SEO.