2026, Happy new year
It's been a while, my dear. I have been learning Nextjs by building an open-source project that is available for everyone to contribute at THOR.
In this article, I will try to demystify Nextjs
first, let's lay some ground work or establish some fundamentals.
Client vs Server
In Nextjs, you can have 2 types of components, namely (server) and (client) components. The server components will never run in the browser and they can be used to make calls to the backend or even directly to a DB. The client components can and will run in the browser, where you have access to localStorage and browser window, it is advisable to not have things such as API keys and secrets in the client components. To make a page a client component, you do this "use client".
File based routing
In Nextjs, you have "file-based routing" which means once a folder or file is created in /src/app directory it becomes a route that can be reached. example if I wanted a "community" route, I would create this /src/app/community/page.js. This will become a route that you can navigate to. Remember to add "use client", if you want the component to be a client component.
_components
In Nextjs, if you do not want certain components / pages that you create to become routes that can be accessed i.e You want to create components such as ToggleButton.jsx, Sidebar.jsx, NavbarLayout.jsx, Avatar.jsx etc. all of these are components that can be reused but I don't want them to become "routes", you can create a folder like this _components and every component you create inside that folder will never be route.
Fetch API
In Nextjs, if you want to make requests that involves API_KEYS or SECRETS to the backend or database, it is advisable to do that from a server component, and gone are the days of getServerSideProps, getStaticParams, and getStaticProps. now you can just use the native fetch API in Javascript to make those requests and you can mimic those behaviours using
const data = await fetch('https://api.example.com/data', {...options})
Here are some options.
Want fresh data every time? → cache: 'no-store' - this used to be getServerSideProps
Want cached data? → cache: "force-cache" - default behavior, similar to getStaticProps
Want periodic revalidation? → next: { revalidate: seconds } - this used to be getStaticProps with revalidate (ISR)
These 3 used to scare me so much, gosh !!!
route group
In Nextjs, if you have a bunch of files or folders and you want to group them for organization and readability, you can create a folder like this (docs) which will contain all of them to keep your workspace neat. e.g src/app/(docs)/content/page.js. This way you have many files in one place.
Top comments (0)