I am trying out Next.js with React and here is my experience.
Introduction
Let's start by saying that I didn't know anything about Next.js.
The documentation is very nice and it starts with a good introduction that explains well where Next.js is positioned.
Next.js is a React framework that gives you building blocks to create web applications.
These building blocks include stuff like data fetching and routing that you would need to otherwise import in React.
The FOUNDATIONS part of the documentation is a pleasant read that walks you through some basic but important concepts of web development.
From JavaScript to React
Here is a quick summary of what you can get in the section From JavaScript to React
Fundamentals of web development
- What is the DOM? An object representation of the HTML elements.
- Imperative vs Declarative Programming - Step-by-step instructions on how to make a pizza vs just ordering a pizza.
- What is JSX? A syntax extension for JavaScript.
- What's Babel? An interpreter to compile JSX into JavaScript so browsers can understand the code.
Fundamentals of JavaScript
- Important JavaScript concepts you should know.
Fundamentals of React
- React Core Concepts 1: Components. Components are small building blocks of code. In React, components are functions that return UI elements. Use React components in JSX by writing the capitalized component name inside tags. You can nest components into each other.
- React Core Concepts 2: Props. Props (e.g. properties) allow you to pass pieces of information as properties to React components. Think of props as passing a string to the src attribute of an img element in HTML.
- React Core Concepts 3: State. State is "any information in your UI that changes over time". React uses functions called hooks to manipulate the state and make some other operations.
More info on learning React.
List of resources to learn React:
In the next few days, I will go through From React to Next.js, but for the moment, this is it!
My Two Cents
- Best documentation I have seen so far, have a look!
- I loved the quick quizzes in the documentation
- While the introduction is great, it doesn't substitute learning JavaScript and React (which are warmly suggested).
Or, if you want to start building, go to
Top comments (10)
Well, going into the Next.JS without any React background is not a good practice.
Even if you know React, you should also learn about what is serverside rendering, what hydration error means, also know how things work in server.
The path should be like HTML , CSS ( at least 2 css frameworks ) JS, React then NextJS
All good but I don’t quite understand why someone should learn at least 2 CSS frameworks 😅 that seems an overkill
Well, component based frameworks and css class based frameworks are really different. While you can use Tailwind properly in Nextjs, you may not be able to use MaterialUI. You should know which propoerties needs to be at client and which should imported where and there are tons of details like that.
Developing in Nextjs means that you are frontend dev, or fullstack ( ofc. backend devs. can work on it but thats another thing.) and if you are rapidly building new apps, you have to use css frameworks to be fast.
To sum up, in orderto face all that issues and get knowledge about them, i think at least you should work with 2CSS frameworks.
I understand your point, however, I would never suggest a beginner learn 2 CSS frameworks before trying Next.js. Maybe the company where they work doesn't even use a CSS framework or use another one of the hundreds available.
Furthermore, Next.js doesn't even mention CSS frameworks among the things you should be familiar with: "To effectively use Next.js, it helps to be familiar with JavaScript, React, and related web development concepts." (nextjs.org/learn/foundations/about...)
But to use react you should now css, if you want to know css you want to know html its all chained but u are right its all about companie's decision. Thats my personal thoughts. got ur point, btw thanks for wonderful shares.
Yes, totally agree on the chaining!
Btw, if you have good resources to suggest on Next.js, feel free to share!
I just went through the next session and can't wait to try it!
dev.to/this-is-learning/first-expe...
After building my first project in Next I wouldn't build in React without it, for no other reason than file based routing. SSR/SSG/ISG are just a free bonus.
If you are just starting out on Next though, please be aware that V13 is a game-changer in many ways. That is not to say you shouldn't be learning V12 because there is lots of code written in it, but a Greenfield project may want to start out on the latest version and there are new paradigms to learn.
Hey Aaron, are you still using and building with Next.js?
Any issue with v13 or v14?
Paid project work took me away from it, but will be back on it soon. My learning project is only ever about 6 live pages so SSR with islands of hydration works fine for me. - in fact any framework is overkill. The potential commercial project could be 60K pages at least, all of which would have to be dynamically updated from fast moving data so SSG or ISG would be a must-have
Thanks for the heads-up!
I am still early in my journey and can't appreciate the differences between v12 and v13 yet.
But looking forward to building more and see that:)