Skip to content

Latest commit

 

History

History
78 lines (75 loc) · 2.77 KB

README.md

File metadata and controls

78 lines (75 loc) · 2.77 KB
Raw

Next.js App Router Course

Demo Application

About

  • This is a starter template for NextJS' learning platform
  • Learn NextJS optimisations through building an invoicing platform

Tools

  • NextJS
  • React
  • Tailwind
  • Vercel
  • PostgreSQL
  • NextAuth

Topics Covered

Course Curriculum

  • Chapter 1: Getting started
  • Chapter 2: CSS Styling
    • GlobalCSS, Modules, TailwindCSS
  • Chapter 3: Font and Image Optimisation
    • next/font and next/image optimisations
  • Chapter 4: Creating Layouts and Pages
    • Nested routing, route segments
    • Partial rendering, using layout.tsx files
  • Chapter 5: Navigating Between Pages
    • Optimisations with next/link compared to <a> tags
    • usePathname() hook to show 'active' links
    • Automatic code-splitting and prefetching
  • Chapter 6: Setting Up Your Database
    • Create a Postgres database
    • Connect database to vercel storage and deployments
    • Seed database with initial data
  • Chapter 7: Fetching Data
    • Database queries
    • Using React Server Components
    • Parallel data fetching
  • Chapter 8: Static and Dynamic Rendering
    • Static: data fetching happens on server at build time or during revalidation
    • Dynamic: content is rendered on the server for each user at request time
  • Chapter 9: Streaming
    • How to implement loading.tsx and React's Suspense
    • Creating loading skeletons
    • Route groups
  • Chapter 10: Partial Prerendering (PPR)
    • Combine: static, dynamic, and stream rendering with PPR.
  • Chapter 11: Adding Search and Pagination
    • NextJS APIs: useSearchParams, usePathname, useRouter
    • Implementing search & pagination with URL search params
    • Note: very useful for sharing searches with other users
    • useDebounce for optimising searches
  • Chapter 12: Mutating Data [MVP]
    • Create, Update, Delete functionality with Postgres
    • React Server Actions
    • formData best practices
    • revalidatePath for client caching
    • Dynamic routing
  • Chapter 13: Handling Errors
    • NextJS's error.tsx file for fallback
    • notFound function and not-found.tsx file
  • Chapter 14: Improving Accessibility
    • eslint-plugin-jsx-a11y
    • Server side form validation with zod
    • useActionState on forms to handle and display errors
    • Using aria-labels
  • Chapter 15: Adding Authentication
    • Using NextAuth.js
    • Creating authorisation middleware
    • Using credential providers for sign-in, sign-out functionality
  • Chapter 16: Adding Metadata
    • Using metadata object in NextJS
    • Static and Dynamic SEO optimisation