Hi! First off, thanks for having a look at my very first article on dev.to 🥳! In this short article I’m going to give an introduction to Next.js while giving you my personal opinion on it as well. Your comments and ideas are also welcome 😎!
What’s in this article
- What is Next.js
- Some personal-favorite features of Next.js
- Choosing Next.js v React
What’s not in this article
- How to start a Next.js project
If you want to create only a very simple informational website, learning HTML and CSS is just enough. But if you want to add some functionality to that site, you may want to use JavaScript as well. Any website - no matter how complex, almost always can be simplified into HTML, CSS and JS code.
But what if you want to create a somewhat complex website or a web app instead of a simple one? That’s where web development libraries such as React.js and frameworks such as Next.js, Vue.js and Angular come in handy.
Next.js can be thought of as a full-stack web development framework, because it allows the developer to write code for frontend and backend in the same application. The frontend code is of course written in React using either JavaScript or TypeScript. (Although my personal favorite is with TypeScript - I’ll tell you why in a future article)
One major question I get asked is,
“Do I need to learn React to start learning Next.js?”
My answer to this question is,
“Don’t think of Next.js as a completely isolated thing from React, just think of it as an additional layer of help provided by the developers of Next.js to React developers because under the hood, Next.js is React!”
Check the following code snippets.
Hello World in React,
//src/App.jsx
import './App.css';
function App() {
return (
<div >
Hello World
</div>
);
}
export default App;
Hello World in Next.js,
//pages/_app.tsx
import '../styles/globals.css';
import type { AppProps } from 'next/app';
function App({ Component, pageProps }: AppProps) {
return <div>Hello World</div>;
}
export default App;
See, very similar. That’s because what Next.js does, is it takes care of some of the mundane yet common tasks needed to be done during the development of a React app.
As an example, developers who use React know the pain it takes to handle routes. If a route name is changed for example from auth/login to /login (among the many requests of real-world clients 😆) then a React developer has to manually change the route in the code. But, a Next.js developer only has to change the folder structure inside the pages folder. (This folder is a Next.js reserved folder for routing, by the way).
Features i like about Next.js
Page-based routing allows easy management of routing within the web app and it supports dynamic routes which allow easy handling of query params etc. If for example you have a
projects/[projectId]sort of route, getting thatprojectIdto display contents of a single project is very easy.Hot code reloading which allows to see changes updated when saving a code file without server restart.
Easy deployment on various platforms like Vercel (offered by creators of Next.js) and Netlify.
Cool documentation which is very beginner-friendly. (But I was not able to get Server-side-rendering working yet by reading that).
What I don’t like about Next.js
Some third party packages which import global css in them will give an error. For example, https://github.com/uiwjs/react-md-editor/issues/52#issue-724437226. There are workarounds, but it’s an inconvenience.
Sometimes the dev version of the web app is too slow in the browser. No problem once built the production release.
Conclusion
Ok then bye bye React! Hello Next.js? Not so fast 😄! While Next.js is a very good framework for mid to complex projects, for very simple projects, it is wise to think of using plain React. (If it is even simpler than that, just use HTML, CSS and JS).
One final note - If it is a fairly complex client project, I almost always ask the client if it is okay to use Next.js or if they want pure React. If they have no preference, I always select Next.js because why not!
But don’t forget the good old HTML, CSS, JS because not all projects require React or Next.js. I mean who is to say you must use React for everything, right? I mean if you want to have a look at the most overengineered, and insanely complicated way to write a hello world web app, take a look at the video by Chris Hawkes - https://youtu.be/3nHQMAY_J1A, of course after giving me a like if you think I deserve one for this article 😃.
I'm also learning this stuff so let me know if I missed something in the comments below. Thanks and have a great day 🥳!
References
I was inspired by this article, please have a look at that also. - https://dev.to/olenadrugalya/introduction-to-nextjs-3gi4
Top comments (0)