{"id":13760263,"url":"https://github.com/leerob/mastering-nextjs","last_synced_at":"2025-04-04T15:09:52.010Z","repository":{"id":37809450,"uuid":"219330844","full_name":"leerob/mastering-nextjs","owner":"leerob","description":"A free video course for building static and server-side rendered applications with Next.js and React.","archived":false,"fork":false,"pushed_at":"2023-03-04T05:44:26.000Z","size":10696,"stargazers_count":579,"open_issues_count":4,"forks_count":128,"subscribers_count":12,"default_branch":"main","last_synced_at":"2025-03-28T14:08:29.102Z","etag":null,"topics":["course","mdx","nextjs","react","vercel"],"latest_commit_sha":null,"homepage":"https://masteringnextjs.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leerob.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-11-03T16:31:03.000Z","updated_at":"2025-03-22T22:45:52.000Z","dependencies_parsed_at":"2024-01-07T03:40:13.933Z","dependency_job_id":"2de49982-2ca8-4228-add4-9f39d8a215bb","html_url":"https://github.com/leerob/mastering-nextjs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leerob%2Fmastering-nextjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leerob%2Fmastering-nextjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leerob%2Fmastering-nextjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leerob%2Fmastering-nextjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leerob","download_url":"https://codeload.github.com/leerob/mastering-nextjs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247198463,"owners_count":20900080,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["course","mdx","nextjs","react","vercel"],"created_at":"2024-08-03T13:01:06.239Z","updated_at":"2025-04-04T15:09:51.990Z","avatar_url":"https://github.com/leerob.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Learn"],"sub_categories":[],"readme":"# Mastering Next.js\n\nHey, everyone! 👋 [I'm Lee](https://leerob.io/), the creator of Mastering Next.js. This course was originally released in 2019. Next.js has evolved quite a bit since v9 and some of this course is officially \"outdated\".\n\nI've updated the course overview below to annotate which parts are up to date, which have changed, and what my new suggestions are. In my opinion, this is the ideal way to _evolve_ this course. The videos will serve as a reference to a point in time, but newer additions to the framework make certain aspects _much_ easier.\n\n- 🟢 **Up to date**\n- 🟡 **Outdated**\n- 🔴 **Do not recommend**\n\n## Introduction\n\n- [**🎥 Watch Now (26:07)**](https://www.youtube.com/watch?v=uQeidE2LA1s\u0026list=PL6bwFJ82M6FXjyBTVi6WSCWin8q_g_8RR)\n- 🟢 Here are my [latest thoughts](https://leerob.io/blog/nextjs-gatsby-create-react-app) on the framework comparison\n- 🟡 This video mentions Image Optimization, which is [now supported in Next.js](https://nextjs.org/docs/basic-features/image-optimization)\n\n## React Overview\n\nI taught Class Components in 2019 for those still in the process of converting to React Hooks. In 2021, it's now standard to use React Hooks for all projects and I would recommend starting there.\n\n- [**🎥 Watch Lesson (21:01)**](https://www.youtube.com/watch?v=cahFm8eeeJI\u0026list=PL6bwFJ82M6FXjyBTVi6WSCWin8q_g_8RR)\n- [**👀 View Code**](https://github.com/leerob/mastering-nextjs/tree/main/course/react)\n- 🟢 Props \u0026 State\n- 🟢 Functional Components\n- 🟢 React Hooks\n- 🟢 ES6\n- 🟢 JSX\n- 🟡 Class Components\n\n## Developing Locally\n\n- [**🎥 Watch Lesson (9:49)**](https://www.youtube.com/watch?v=KojdxS-1ot8\u0026list=PL6bwFJ82M6FXjyBTVi6WSCWin8q_g_8RR)\n- 🟢 `next dev`, `next build`, and `next start`\n- 🟢 Prettier\n- 🟡 Image Optimization is [now supported in Next.js](https://nextjs.org/docs/basic-features/image-optimization)\n- 🟡 ESLint is [now integrated in Next.js](https://nextjs.org/docs/basic-features/eslint)\n- 🔴 Standard (Prettier + ESLint won)\n\n## Navigating Between Pages\n\n- [**🎥 Watch Lesson (19:25)**](https://www.youtube.com/watch?v=ERUHYh_65F4\u0026list=PL6bwFJ82M6FXjyBTVi6WSCWin8q_g_8RR)\n- [**👀 View Code**](https://github.com/leerob/mastering-nextjs/tree/main/course/navigation)\n- 🟢 `next/link` (client-side routing)\n- 🟢 `useRouter`\n- 🟢 Retrieving data from URLs\n- 🟡 `getInitialProps` – This has largely been replaced by [newer APIs](https://nextjs.org/blog/next-9-3#next-gen-static-site-generation-ssg-support)\n\n## Styling\n\n- [**🎥 Watch Lesson (20:04)**](https://www.youtube.com/watch?v=2t6y-bDIe0Y\u0026list=PL6bwFJ82M6FXjyBTVi6WSCWin8q_g_8RR)\n- [**👀 View Code**](https://github.com/leerob/mastering-nextjs/tree/main/course/styling)\n- 🟢 Responsive + Mobile-First Design\n- 🟢 styled-jsx\n- 🟡 CSS \u0026 CSS Modules are now supported out of the box\n- 🔴 Sass - I would recommend [other options](https://leerob.io/blog/css-with-react)\n- 🔴 Styled-Components - I would recommend [other options](https://leerob.io/blog/css-with-react)\n\n## Fetching Data\n\n- [**🎥 Watch Lesson (46:30)**](https://www.youtube.com/watch?v=0UjtqQGLMks\u0026list=PL6bwFJ82M6FXjyBTVi6WSCWin8q_g_8RR)\n- [**👀 View Code**](https://github.com/leerob/mastering-nextjs/tree/main/course/fetching-data)\n- 🟢 API Routes\n- 🟢 [SWR](https://swr.vercel.app)\n- 🟢 GraphQL\n- 🟢 Hasura\n- 🟡 Apollo Client - I'd recommend [SWR](https://swr.vercel.app/docs/data-fetching#graphql)\n- 🟡 Custom Server - Most needs for this have moved into Next.js core `next start`.\n\n## Managing Assets and SEO\n\n- [**🎥 Watch Lesson (14:19)**](https://www.youtube.com/watch?v=fJL1K14F8R8\u0026list=PL6bwFJ82M6FXjyBTVi6WSCWin8q_g_8RR)\n- 🟢 Favicons\n- 🟢 Open Graph\n- 🟢 Core themes are still valid for SEO\n- 🟡 Image Optimization is [now supported in Next.js](https://nextjs.org/docs/basic-features/image-optimization)\n- 🟡 There's now [official guidance on SEO](https://nextjs.org/learn/seo)\n\n## Building A Blog With MDX\n\n- [**🎥 Watch Lesson (32:32)**](https://www.youtube.com/watch?v=dsCfi0yRr1w\u0026list=PL6bwFJ82M6FXjyBTVi6WSCWin8q_g_8RR)\n- [**👀 View Code**](https://github.com/leerob/mastering-nextjs/tree/main/course/mdx)\n- 🟢 MDX vs CMS\n- 🟡 Component Library (Theme UI) – I would recommend [other options](https://leerob.io/blog/css-with-react)\n- 🔴 StaticKit – Acquired by [Formspree](https://formspree.io/)\n\n## Authentication\n\n- [**🎥 Watch Lesson (23:34)**](https://www.youtube.com/watch?v=1BUT7T9ThlU\u0026list=PL6bwFJ82M6FXjyBTVi6WSCWin8q_g_8RR)\n- 🟢 JWTs\n- 🟢 Auth0\n- 🟢 I have a [new course](https://react2025.com/) using Firebase and Next.js\n- 🟡 Would recommend [next-auth](https://next-auth.js.org/) for an OSS solution now\n- 🟡 Here are my [latest thoughts](https://leerob.io/blog/react-state-management) on State Management (Forms)\n\n## Testing \u0026 Error Handling\n\n- [**🎥 Watch Lesson (33:12)**](https://www.youtube.com/watch?v=yPBtVxDEC0w\u0026list=PL6bwFJ82M6FXjyBTVi6WSCWin8q_g_8RR)\n- 🟢 Jest\n- 🟢 React Testing Library\n- 🟢 Sentry ([see latest example](https://github.com/vercel/next.js/tree/canary/examples/with-sentry))\n\n## State Management \u0026 More\n\n- [**🎥 Watch Lesson (25:41)**](https://www.youtube.com/watch?v=MR43-gYVQbI\u0026list=PL6bwFJ82M6FXjyBTVi6WSCWin8q_g_8RR)\n- 🟢 TypeScript Integration\n- 🟡 Here are my [latest thoughts](https://leerob.io/blog/react-state-management) on State Management\n- 🟡 Redux ([see latest example](https://github.com/vercel/next.js/tree/canary/examples/with-redux))\n\n## Exporting \u0026 Deployment\n\n- [**🎥 Watch Lesson (11:20)**](https://www.youtube.com/watch?v=OQ4O4daD434\u0026list=PL6bwFJ82M6FXjyBTVi6WSCWin8q_g_8RR)\n- 🟢 [Vercel](https://vercel.com)\n- 🟢 You no longer need to customize anything in `vercel.json` - it just works!\n- 🟡 ZEIT is now Vercel\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleerob%2Fmastering-nextjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleerob%2Fmastering-nextjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleerob%2Fmastering-nextjs/lists"}