Skip to content

Commit f952319

Browse files
manuarora700manuarora700
committed
➕ADD: new blog post, Step Check, Large components
1 parent a3cf874 commit f952319

File tree

16 files changed

+219
-116
lines changed

16 files changed

+219
-116
lines changed

‎components/MDXComponents.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import ConsCard from "@/components/ConsCard";
99
// import Analytics from "@/components/metrics/Analytics";
1010
// import YouTube from "@/components/metrics/Youtube";
1111
import Step from "@/components/Step";
12+
import StepLarge from "@/components/StepLarge";
13+
import StepCheck from "@/components/StepCheck";
1214

1315
const CustomLink = (props) => {
1416
const href = props.href;
@@ -31,6 +33,8 @@ const MDXComponents = {
3133
ConsCard,
3234
ProsCard,
3335
Step,
36+
StepLarge,
37+
StepCheck,
3438
Tweet,
3539
};
3640

‎components/StepCheck.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
// export default function StepCheck({ title }) {
2+
// return (
3+
// <div className="step flex items-center py-2">
4+
// <div className="flex items-center text-green-700 dark:text-green-300">
5+
// {/* <span className="sr-only">Check</span> */}
6+
// <svg
7+
// className="h-5 w-5 mr-2"
8+
// xmlns="http://www.w3.org/2000/svg"
9+
// fill="none"
10+
// viewBox="0 0 24 24"
11+
// stroke="currentColor"
12+
// >
13+
// <path
14+
// stroke-linecap="round"
15+
// stroke-linejoin="round"
16+
// stroke-width="2"
17+
// d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
18+
// />
19+
// </svg>
20+
21+
// <p className="font-small text-gray-900 dark:text-gray-100">{title}</p>
22+
// </div>
23+
// </div>
24+
// );
25+
// }
26+
27+
export default function StepCheck({ title }) {
28+
return (
29+
<div className="flex font-small items-baseline mb-2">
30+
<div className="h-4 w-4 mr-2">
31+
<svg
32+
className="h-5 w-5 mr-2 text-green-500 inline-block"
33+
xmlns="http://www.w3.org/2000/svg"
34+
fill="none"
35+
viewBox="0 0 24 24"
36+
stroke="currentColor"
37+
>
38+
<path
39+
strokeLinecap="round"
40+
strokeLinejoin="round"
41+
strokeWidth="2"
42+
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
43+
/>
44+
</svg>
45+
</div>
46+
<span>{title}</span>
47+
</div>
48+
);
49+
}

‎components/StepLarge.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export default function StepLarge({ number, title }) {
2+
return (
3+
<div className="step flex items-center py-4">
4+
<div className="flex items-center justify-center border border-gray-200 font-extrabold dark:border-gray-900 rounded-full h-8 w-8 text-green-500">
5+
{number}
6+
</div>
7+
<h2 className="ml-3 tracking-tight font-bold">{title}</h2>
8+
</div>
9+
);
10+
}

‎data/blog/css-with-react.mdx‎

Lines changed: 0 additions & 89 deletions
This file was deleted.

‎data/blog/demo-blog.mdx‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎data/blog/top-5-nextjs-resources.mdx‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
---
2+
title: "Top 5 courses and resources to learn Next JS in 2021"
3+
publishedAt: "2020-03-19"
4+
summary: "Get the top 5 resources to learn Next JS in 2021 and take your React skills to the next level"
5+
image: "/static/images/top-5-nextjs-resources/nextjs"
6+
---
7+
8+
<Image
9+
alt={`Next JS Landing Page`}
10+
src={`/static/images/top-5-nextjs-resources/nextjs.png`}
11+
width={1800}
12+
height={1000}
13+
priority
14+
/>
15+
16+
For all the developers out there who are working with [React](https://reactjs.org) and are _NOT_ working with [Next JS](https://nextjs.org) are missing out on the best framework available out there.
17+
Even my personal website [manuarora.in](https://manuarora.in) is built with Next JS.
18+
19+
[Next JS](https://nextjs.org) is a production ready framework for react to build and ship React applications faster. It is developed by [Vercel](https://vercel.com) which also manages hosting of modern day frameworks. You can connect your Next JS Git repository with vercel it deploys the website on every commit.
20+
21+
Some of the **features** of Next JS are:
22+
23+
- **Hybrid**: SSG and SSR (Static Site Generation, Sever Side Rendering)
24+
- **File System Routing**
25+
- **API Support**
26+
- **Typescript Support**
27+
- **Image Optimization**
28+
- **Zero Config**
29+
- **NextJS Analytics**
30+
31+
As mentioned on the official [Next JS](https://nextjs.org)
32+
33+
> “Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.”
34+
35+
It is really important for React developers to learn Next JS and implement it in their workflow.
36+
37+
Here is a list of **Top 5 Next JS resources** to learn Next JS in 2020.
38+
39+
<StepLarge number={1} title="Fireship.io - Next JS Firebase course" />
40+
41+
<Image
42+
alt={`Fireship course`}
43+
src={`/static/images/top-5-nextjs-resources/fireship.png`}
44+
width={1800}
45+
height={1000}
46+
priority
47+
/>
48+
49+
If you've taken any course from [fireship.io](https://fireship.io) or watched **Jeff's** [Youtube Channel](https://www.youtube.com/channel/UCsBjURrPoezykLs9EqgamOA) then you know what I'm talking about. This Next JS is to the point and precise. Jeff follows a fast paced teaching approach, explaining all the concepts in great detail.
50+
51+
Also, you get to [build a project](https://next.fireship.io) from scratch which is a big plus. I'm a huge fan of fireship's real world projects, and here we build a blogging platform (Medium, Dev.to style) with real world authentication, username generation, image uploads and more.
52+
53+
**Benefits**
54+
55+
<StepCheck title="Fast paced approach." />
56+
<StepCheck title="Real world project." />
57+
<StepCheck title="Complex concepts amazingly explained (SSR, SSG ISR, Routing)." />
58+
59+
Link to the course: [react-next-firebase](https://fireship.io/courses/react-next-firebase/)
60+
61+
<StepLarge
62+
number={2}
63+
title="Academind - Next JS and React The Complete Guide"
64+
/>
65+
66+
<Image
67+
alt={`Academind course`}
68+
src={`/static/images/top-5-nextjs-resources/academind.png`}
69+
width={1800}
70+
height={900}
71+
priority
72+
/>
73+
74+
I've taken Maximilian's courses in the past (Angular and Javascript course) and I love his teaching style. Recently he has come up with a [Next JS](https://www.udemy.com/course/nextjs-react-the-complete-guide/?couponCode=D_0321) course which is highly promising. The good thing about this course is that he has included a summary module which can be referenced if you get stuck.
75+
76+
**Benefits**
77+
78+
<StepCheck title="Easy to understand, No prior React experience required." />
79+
<StepCheck title="Real world project included." />
80+
<StepCheck title="Thorough explanation on every key concept." />
81+
82+
Link to the course: [Next JS & React - The Complete Guide](https://www.udemy.com/course/nextjs-react-the-complete-guide/?couponCode=D_0321)
83+
84+
<StepLarge number={3} title="Codedamn - Next JS Learning Path" />
85+
<Image
86+
alt={`Codedamn course`}
87+
src={`/static/images/top-5-nextjs-resources/codedamn.png`}
88+
width={1800}
89+
height={1100}
90+
priority
91+
/>
92+
93+
This Next JS course comes with a learning path. Here, You build as you go. You can choose the learning path (Next JS, React basics) and proceed accordingly. The course instructor, Mehul Mohan, explains each concept clearly and concisely. There are also real-world projects included within the portal itself.
94+
95+
**Benefits**
96+
97+
<StepCheck title="Absolutely Free course." />
98+
<StepCheck title="Complex, advanced concepts explained in great detail." />
99+
<StepCheck title="Development to deployment." />
100+
101+
Link to the course: [Codedamn - Next JS Learning Path](https://codedamn.com/learning-paths/nextjs-mastery)
102+
103+
<StepLarge number={4} title="Mastering NextJS" />
104+
105+
<Image
106+
alt={`Masteringnextjs course`}
107+
src={`/static/images/top-5-nextjs-resources/masteringnextjs.png`}
108+
width={1800}
109+
height={950}
110+
priority
111+
/>
112+
113+
[Mastering NextJS](https://masteringnextjs.com) is one of the first course I took on Next JS and I absolutely loved it. It is free and explains pretty much everything related to Next framework. Not only the videos are helpful but the code is extremely organized and follows best practices. Lee, who created the course, is an amazing instructor with an eye for minimal and clean design.
114+
115+
**Benefits**
116+
117+
<StepCheck title="Absolutely Free course." />
118+
<StepCheck title="Best practices for creating React projects" />
119+
<StepCheck title="Minimal and clean design." />
120+
<StepCheck title="Deployement to production." />
121+
122+
Link to the course: [Mastering NextJS](https://masteringnextjs.com)
123+
124+
<StepLarge number={5} title="Filip Jerga - Next.js React and Node" />
125+
<Image
126+
alt={`Filip course`}
127+
src={`/static/images/top-5-nextjs-resources/filip.png`}
128+
width={1800}
129+
height={950}
130+
priority
131+
/>
132+
133+
This course is divided into two parts, namely **learning** and **project**. The _learning_ part deals with learning the core concepts of Next framework like SSG, SSR and ISR. The _Project_ deals with creating an actual project (A portfolio application for developers) from scratch. Filip, the instructor of this course, focuses on a project driven approach.
134+
**Benefits**
135+
136+
<StepCheck title="Project oriented course" />
137+
<StepCheck title="Custom CMS for managing data" />
138+
<StepCheck title="Integrating Next.js with Node.js" />
139+
140+
Link to the course: [Complete Next.js with React & Node - Beautiful Portfolio App](https://www.udemy.com/course/awesome-nextjs-with-react-and-node-amazing-portfolio-app/)
141+
142+
These were my top picks for learning Next.js in 2021. Do let me know on [Twitter](https://twitter.com/mannpaaji) or [LinkedIn](https://linkedin.com/in/manuarora28) if you found this post useful.

‎pages/blog.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,9 +75,9 @@ export default function Blog({ posts }) {
7575
Most Popular
7676
</h3>
7777
<BlogPost
78-
title="Why I started using NextJS in my workflow"
79-
summary="A case study on how I ditched traditional React and started using NextJS along with it's features such as Image optimization & Routing."
80-
slug="css-with-react"
78+
title="Top 5 courses and resources to learn Next JS in 2021"
79+
summary="Get the top 5 resources to learn Next JS in 2021 and take your React skills to the next level."
80+
slug="top-5-nextjs-resources"
8181
/>
8282
{/* <BlogPost
8383
title="How to design a minimal and beautiful website which actually converts"

‎pages/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@ export default function Home() {
3434
Most Popular
3535
</h3>
3636
<BlogPost
37-
title="Why I started using NextJS in my workflow"
38-
summary="A case study on how I ditched traditional React and started using NextJS along with it's features such as Image optimization & Routing."
39-
slug="css-with-react"
37+
title="Top 5 courses and resources to learn Next JS in 2021"
38+
summary="Get the top 5 resources to learn Next JS in 2021 and take your React skills to the next level."
39+
slug="top-5-nextjs-resources"
4040
/>
4141
{/* <BlogPost
4242
title="How to design a minimal and beautiful website which actually converts"

‎public/sitemap.xml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,10 @@
3232
<loc>https://manuarora.in/blog/demo-blog</loc>
3333
</url>
3434

35+
<url>
36+
<loc>https://manuarora.in/blog/top-5-nextjs-resources</loc>
37+
</url>
38+
3539
<url>
3640
<loc>https://manuarora.in/snippets/gradient-text</loc>
3741
</url>

‎public/static/images/top-5-nextjs-resources/academind.png‎

582 KB
Loading

0 commit comments

Comments
 (0)