A few thoughts about Next.js

Dimterion
3 min readAug 26, 2022

--

After swimming in the development learning pool for a while I’ve decided that adding one more thing to it won’t hurt anyone and checked some basic things about Next.js.

This time I simply went on their website and read through some of the documentation. Otherwise the amount of already started courses would go out of hands. Plus, I wanted to check if documentation-only approach could bring any results. There will be completely novice’s thoughts now, cause overall I doubt that I even touched the surface of this framework.

In the docs you can either complete a relatively short learning section or go through the documentation directly. In theory, you could also check the examples section or this repo in case you want something basic but already completed. Then you can adjust the bare minimum of the code without understanding it too much and get your simple app.

I tried all the three. First, I’ve made a blog with npx create-next-app --example blog-starter blog-starter-app just to see what the code structure is. Then I followed the tutorial on making a simple version of the blog yourself. And finally I’ve briefly scanned the docs and made a basic two-pages app with npx create-next-app@latest and some adjustments to it. It’s deployed to Vercel here and the repo is here.

Overall my first thought about Next.js was something like “so, it’s sort of React but bigger and you don’t need to install anything for the routes”. Also, a big part of the documentation (learning section included) is dedicated to the explanation of static generation and server-side rendering. While it’s important to know, this kind of pushes the newbies like me away as if starting explaining the thing you won’t be really using at first in every detail. It feels like the tutorial is mostly aiming those who came there with a ton of experience.

While it’s understandable that you should probably be at least familiar with basic React and JavaScript before switching to Next.js, it would still be nice if the explanations were slightly more amateurs-friendly. Besides, there is a nice explanation of some general React functionality anyway (but, after going through it, you sort of getting the hint that you should probably go and check more on it).

After finishing the tutorial, the second thought about Next.js was something like “so, you still have your components and props, but you put your pages inside of the pages folder and Next does the job of routing for you.”

And after applying some styling the final thought was something like “so, you wrap you app in <Layout></Layout> and then you either have global CSS-file or you can have separate files for each of your pages/components but you need to import them and use specific naming format like Filename.module.css and add them as className={styles.chosenClassName}, which gives you the possibility of having the same class names in each CSS-file but they still will be applied separately”.

I know that these are just my chaotic thoughts, bit I’ve decided to wrap them in writing simply to sum a couple of things up while they’re still fresh. I guess the main point for me to note so far is, while I don’t mind briefly checking another framework/technology/etc., I would personally prefer properly learning those topics that have been already started (in my case it’s React and JavaScript).

Adding something new in this case feels more like reading through the basics and then storing it in the imaginary folder in your head. If the right moment comes, you can at least open it and check what you already know, but otherwise you just keep the folder for this future use-case.

As one stubborn Fridays-writer says at the end of his stories: if you found a smidge of usefulness in this text, I thank thee, kind person.

--

--

Dimterion

Hi. I’m Dmitrii. I'm interested in coding and new technologies and write about it every Friday.