About the course:
Our Next.js training training course is aimed at developers who are looking to produce high-performance applications using Next.js, a React framework built on JavaScript that combines the strengths of single page applications with server-side rendering (SSR).
You'll gain hands-on experience creating static and dynamic pages, learn the most efficient ways to fetch data for your use case, optimise image delivery - and perform well in search engines for SEO and analytics thanks to SSR.
Guided by an expert instructor, you'll learn through practical exercises which reflect real-world scenarios. We have a number of extra course topics available for customised Next.js training too, so if your team needs to dive in at a deeper level, we can adapt to your learning needs.
Get in touch if you have any questions about remote attendance of our virtual; online courses, Next.js course content, setup, or anything else about your learning and development requirements - we'll be glad to help.
You can attend this course remotely, as part of a wider training programme or standalone workshop. As soon as it's safe we'll go back to offering the course for custom on-site / in-house delivery as well as resuming our public scheduled courses in London.
Express Next.js training option:
Let us know if you are interested in an on-demand condensed 2-day intensive workshop to get up to speed with the core Next.js functionality (suitable for experienced web developers).
Learning outcomes
- 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 and analytics
- 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
- Have an efficient state management strategy
- Reason about pre-rendering and serverless functions with Next
Who should attend
This course is aimed at developers who are looking to build production-ready apps with the Next.js framework and React, using JavaScript
Prerequisites
Delegates should have some familiarity with JavaScript HTML and CSS fundamentals - we'll go over some fundamental concepts at the start of the course to make sure you get maximum value from your training.
Live, instructor-led online and on-site training
We appreciate that you need flexibility to fit in with new working situations - whether you're an individual, part of a distributed team, or simply have projects and deadlines to meet.
Our remote training can take place online in a virtual classroom, with content split into modules to accommodate your scheduling challenges and meet your learning goals. Get in touch today to find out how we can help design a cost-effective, flexible training solution.
As soon as it's safe, we'll return to also offering the on-site custom training courses and programmes upon which we've built our reputation.
Key JavaScript Concepts
- Arrow functions
- List comprehensions (map, filter, reduce)
- Hoisting and scopes
- Spreading and destructuring
- The event loop
- Promises and async/await
Introduction to Next.js
- React overview
- Client and server side rendering
- File structure and routing
- Benefits and future
Hooks in React
- What are hooks?
- useState
- useEffect
Functional Components
- What are functional components?
- Props and children
- Inheritance and composition
Styling
- Overview of the diverse landscape
- Getting setup with Tailwind and purgecss
Special Next.js functionality
- getStaticProps
- getServerSideProps
- 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
- Best practices with react-testing-library
Optimising Next.js Applications
- Optimising images
- Develop data-fetching mental models
- Using streaming in applications
Further topics for extended / customised Next.js training for your team - get in touch for more details
Higher level:
- Build static sites with Next
- Handle errors well with Sentry
Syllabus level:
- Static vs dynamic sites
- useContext
- Custom hooks
- Other styling approaches
- Integrating with Sentry