Enhancing Website Look with Styles, Fonts, and Images in Next.js

Introduction

• Focus on improving website appearance
• Topics: Styles, fonts, and images

Fonts

Importing Google Fonts

• Next.js provides an easy way to import Google fonts or local fonts
• Example shown using Inter font
• Import Google fonts using: import { Inter } from 'next/font/google'
• Instantiate font and configure it, e.g., const inter = Inter({ subsets: ['latin'] })
• Properties:
  • subsets: Specify language subsets (e.g., latin)
  • weights: Specify font weights
  • styles: Specify font styles

Switch to Rubik Font

• Change import to use Rubik
• Update constant name and apply classes in the template
• Custom fonts are self-hosted, no external requests to Google fonts

Viewing Fonts in Browser

• Inspect HTML elements to verify font usage
• Example: Inspecting body tag to see font-family: Rubik

Styles

Global Styles

• Use a global stylesheet for styles applied to the entire project
• Imported into the layout file to ensure they apply to all pages

CSS Modules

• Scopes styles to specific components
• Filename convention: Component.module.css
• Useful links provided for setup

Using Tailwind CSS

• Tailwind configured out of the box in Next.js
• Tailwind config file present, allows theme customization

Customizing Tailwind Theme

• Remove unnecessary properties (e.g., backgroundImage)
• Add custom colors:
  • Example: Add primary color with value #7856ff
  • Utility classes created automatically for new colors (e.g., text-primary)

Global Stylesheet for Tailwind

• Ensure Tailwind directives are included: @tailwind base; @tailwind components; @tailwind utilities;
• Apply Tailwind utility classes using @apply
• Example base styles added for body, headings, nav, buttons, forms, and other UI components

Adding Dummy Content

• Populate home page with dummy content for styling preview
• Example provided with basic HTML elements and Tailwind classes
• Ensure Link component is imported for routing

Images

Using the Image Component

• Built-in Next.js Image component provides advanced features and optimization
• Import image file into the relevant component folder (e.g., import logo from './Dojo-logo.png')

Key Props for Image Component

• src: Source of the image
• alt: Alt text for the image
• width: Image width in pixels
• quality: Image quality (0-100)
• placeholder: Placeholder effect (e.g., blur)

Additional Props

• Other props available: loader, fill, sizes, priority, style, etc.

Summary

• Improved website appearance using fonts, global styles, and images
• Applied Tailwind for efficient and manageable styles
• Added dummy content for visual reference
• Next lesson: Fetch data in components