💻

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

Jul 11, 2024

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