Next.js by Example (Udemy)

Learn how to develop static websites and hybrid web apps with React and Next.js. This course covers everything from fundamental Next.js concepts to deploying your application in production. Explore Tailwind CSS, React Query, Headless CMS, JWT authentication, and more. Perfect for React and web developers looking to build highly optimized web applications.

 

What you'll Learn

Foster web applications with Next·js

Style parts with styled-jsx or Tailwind CSS

Fabricate completely static websites or cross breed (static + SSR) applications

Get information from a distant API like a Headless CMS

Carry out treat based JWT authentication

Reserve information with React Query

 

Necessities

Knowledge of present day web development: HTML, CSS, JavaScript, npm

Knowledge of React, including the useState and useEffect snares

Portrayal

Portrayed as "The React System for Production", Next.js makes it simple to construct exceptionally upgraded web applications in React.

This course will direct you through learning Next.js by creating two models: a completely static website, and a half breed (static + server-side rendered) application.

The main model, an individual blog website, will acquaint you with key Next.js ideas, for example, pre-rendering, file-system based routing, and hydration.

It will tell you the best way to stack information in pages that are statically created at assemble time, and how to style your pages in worldwide CSS files or with the styled-jsx library that gives part perused styles.

The Organization segment will present you every one of the choices for running your application in production, from completely oversaw serverless stages like Vercel to designing your own Linux servers.

The second model you will create is a shop website. This will be a more complicated application that heaps its information from a Headless CMS (Strapi) and utilizes progressed Next.js elements, for example, Incremental Static Regeneration to naturally reflect changes in the backend information.

It will tell you the best way to empower TypeScript support in a Next.js project on the off chance that you wish to do as such. Utilizing TypeScript is discretionary; everything except one of the recordings utilize plain JavaScript. However, you will find the full TypeScript code for the shop model in a GitHub storehouse in the event that you prefer TypeScript.

The website will utilize the famous Tailwind CSS library for styling, and the Next Picture part for picture improvement.

You will see various ways of stacking information from an outside API, including composing your own API routes in Next.js, and how to pick the best methodology for your particular necessities.

The model will incorporate a protected authentication system based on JWT and treats, and the React Query library will be utilized for caching information on the client side.

The full source code for all models is given, with a simple method for seeing the progressions made in each talk.

The course can be followed with the most recent Next.js 13. Note that trial highlights, similar to the beta application catalog, are not covered.

Who this course is for:

React/Web designers who need to construct static or half breed (static + SSR) web applications with Next·js

 

Teacher

Mirko Nasato

Programming Engineer and Coach

• 4.7 Educator Rating
• 4,635 Audits
• 36,113 Understudies
• 3 Courses

Mirko has 20 years of involvement creating programming for many organizations, from new businesses to huge, high-profile associations, all the more as of late as Lead Designer and Draftsman.

He knows about various programming dialects and the full application stack, from backend administrations to web and portable applications. Mirko likewise holds a Postgraduate Recognition in Programming Development from the Open College.

He is dependably quick to learn new innovations and appreciates instructing on Udemy in light of the fact that it offers him the chance to impart his experience to large number of different designers.

He runs his consultancy organization, Encoded Information Ltd, based in London, U.K.

 

4.8 course ratings 461 reviews

Takhir I.

Rating: 5.0 out of 52 weeks prior

 

Extraordinary clarification! Creator monitors libraries deliveries and makes a course refreshes in like manner by remarks underneath class or at times in any event, supplanting entire illustration. Simple to follow. Thumb up without a doubt. Strongly suggest!

 

Russ F.

Rating: 5.0 out of 5 3 weeks prior

 

Most certainly 5 stars. All that fundamental is concealed to get to speed on NextJS. The three most significant parts of rating a course are here: 1) Course conveys all that it guarantees - everything is current and everything works. 2) Showing style is suitable for the substance and anticipated crowd, 3) Reactions to understudy questions are quick and exceptionally exhaustive and supportive.

 

Jakub K.

Rating: 5.0 out of 5 a month prior

 

Extremely valuable course, Mirko made sense of Next.js exhaustively. He shows bit by bit how to tackle issues and executes great practices for example partition of worries. I enthusiastically suggest this educator!

 

Abdul-Hakeem S.

Rating: 4.5 out of 5 2 months prior

 

This is a brilliant course for learning NextJS. The one thing that wasn't covered that I was truly keen on was the means by which to deal with safeguarded routes. Other than this, Mirko made a brilliant showing.

 

Useful links:

• Next.js official website: https://nextjs.org/
• React official website: https://reactjs.org/
• Tailwind CSS official website: https://tailwindcss.com/
• React Query official website: https://react-query.tanstack.com/
• Headless CMS: https://headlesscms.org/
• Authentication with Next.js: https://next-auth.js.org/
• Next.js deployment options: https://nextjs.org/docs/deployment
• GitHub repository for the shop example: https://github.com/mirko-nasato/nextjs-by-example-shop