Link Search Menu Expand Document

#+TITLE: NextJS Course outline #+ROAM_ALIAS:

  • tags::

  • Key concepts: Server Side Rendering Next Links File based routing JSX Components Custom error pages getInitialProps getServerSideProps ** Dynamic pages Deploying to Vercel Layout componenes SEO Comments and nested comments with recursion Next router (back button) Next API routes State management (UI vs Server) Local development environment Styling Fetching data Testing and error handling

  • In a nutshell: ** By the end of this course you will be able to:

  • Build and deploy React applications in Next.js
  • How to structure your React code in the context of a Next.js application
  • Create static and dynamic pages in Next.js
  • Understand how routing and browser history is handled in Next
  • Use efficient strategies for data fetching
  • Build applications the handle image optimisation well
  • Build applications that have great SEO
  • Adding server side API endpoints
  • Work with forms in React
  • Decide on the best authentication strategy for your use case
  • Use testing best practices with React Testing Library
  • Handle errors well with Sentry
  • Have an efficient state management strategy
  • Reason about pre-rendering and serverless functions with Next
  • Build static sites with Next
  • Course Syllabus ** Key JavaScript Concepts
  • Arrow functions
  • List comprehensions (map, filter, reduce)
  • Hoisting and scopes
  • Spreading and destructuring
  • The event loop
  • Promises and async/await

** NextJS

  • React overview
  • Client and server side rendering
  • File structure and routing
  • Static vs dynamic sites
  • Benefits and future

** Hooks in React

  • What are hooks?
  • useState
  • useEffect
  • useContext
  • Custom hooks

** Functional Components

  • What are functional components?
  • Props and children

** Styling

  • Overview of the diverse landscape
  • Getting setup with Tailwind and purgecss

** Special Next.js functionality

  • getInitialProps
  • getServerSideProps
  • getStaticProps
  • getPaths
  • Custom _app.js and _document.js files

** Handling state

  • Prop drilling, context sharing and hooks
  • UI state vs server state
  • React-query and the stale-while-revalidate approach

** Serverless API Routes

  • How do they work?
  • Interacting with 3rd party services
  • Keeping secrets from clients

** Successful applications

  • Working with forms in React
  • SEO and analytics
  • Image optimisation

** Security and authentication

  • Security and authentication in a serverless world
  • Authentication with Auth0
  • Protecting API routes

** Testing and error handling

  • Custom error and 404 pages
  • Integrating with Sentry
  • Best practices with react-testing-library