Intro
Hey, guys! Recently I've started getting familiar with Next.js. You know, I've been always so curious about learning new stuff and not just for hype or to show off because you can make an infinite carousel with your stack, but for its utility. So I wanted to share my first impressions.
What Is Next.js?
In a nutshell, it is a framework built on top of React created by Vercel, for building full-stack web applications. It takes what React can do and adds a few more features like:
- Optimizations for images, fonts and scripts
- Routes using the file system
- CSS support, like CSS modules, Tailwind
- Server side rendering (SSR)
- Built-in API Routes
- and more...
So far so great, I'd say!
Create Your First Next.js app
I noticed getting started is very straightforward. You just open a terminal and you go like this:
npx create-next-app@latest
So, next you will meet a few prompts like:
PS C:\Users\Alexandru\Desktop\next> npx create-next-app@latest
√ What is your project named? ... .
√ Would you like to use TypeScript? ... No / Yes
√ Which linter would you like to use? » ESLint
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like your code inside a `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to use Turbopack? (recommended) ... No / Yes
√ Would you like to customize the import alias (`@/*` by default)? ... No / Yes
Creating a new Next.js app in C:\Users\Alexandru\Desktop\next.
And that's it. You just created a fullstack app from scratch! Well, not quite, but you are closer now!
What I Noticed
1. Built-ins
After creating the Next app, there are a lots of built-ins. Tailwind and Typescript are already configured. It also initializes a git repository and creates a .gitignore file with some stuff that you shouldn't push to git, like node_modules, .env, build.
2. Basic app structure
The folder structure is simple. It mainly looks like this:
my-next-app
/node_modules
/public // some svgs here
/src/app // the App Router
globals.css
layout.tsx // the root layout, required
page.tsx // your homepage at /
.gitignore
next.config.ts // app configuration
package.json // scripts, dependencies
tsconfig.json // typescript configurations
3. The Routing System
With Next.js, forget about forgeting to install the react-router-dom dependency and then ask yourself why does the console spits errors at you and your app dies. Forget about your old React Router...
There are actually two ways of doing it.
-
1. Inside
/src/appfolder, you can choose for having a/pagesfolder and there you setup your routes as files. Every file name should match the route path you need.
For example, if you need a route to /about, you go to /src/app/pages and there you create a file called about.tsx, if you use Typescript. And this file is your basic day-to-day React component.
-
2. The second choice you have is actually the new way of doing things. Inside /src/app folder you create a folder that should match your route path and inside it you create a file called
page.tsx.
For example, if you need a route to /contact, you go to /src/app/, create a folder called 'contact' and then inside id create a file called 'page.tsx'.
4. The Components
It is just like having components in React. So cool! But these components are somehow special. Every time you create a component in Next.js, again, just like in React, this component is at the same time a client component and a server component, so to speak...
Whenever you check these points:
- State and event handlers: onClick, onChange
- Lifecycle logic: useEffect
- Browser-only APIs: localStorage, window
- Custom hooks you need a client component. And you have to use it like this:
'use client'
import { useState } from 'react'
export default function Button() {
const [ state, setState ] = useState(...);
}
If you need a server component and you check these boxes:
- Fetch data from databases or APIs
- Use API keys, tokens, and other secrets
- Reduce the amount of JavaScript sent to the browser
just do nothing, your simple React component in
Next.jsis already a server component by default.
5. Use Effect Hook
Something interesting, when using server components and need to fetch data, you don't need useEffect anymore, without which you would cause an infinite render in React.
export default async function Page() {
const res = await fetch(url)
...
}
How to Approach Learning
Recently I have tried a different approach when it comes to learning. I am giving myself a project, a big one, a great challenge. And then I am thinking about improvements I want to make or new tools or languages I would like to learn and so on. I make a quick intro, like a very small crash course for that language, tool etc, like the foundation, to get the bigger picture. Then I start working on that specific project, learning and applying what I need on that project immediately.
Something like, you want to create a blog and at the same time you want to learn Next.js or other framework. You get a short intro. And now you need to create the app. So you go documenting, googling, tutorials and then do it yourself. And then you need the navigation, which needs routing. You go learn how to do that and apply it on your blog immediately.
This is learning by building. And I noticed it sticks better. I will bring some updates on how it goes in the future.
And another tip to learn better would be to read the documentation, which is sometimes boring, I know. But it does the job.
If you want to know more, the documentation for Next.js is right HERE.
In Conclusion...
I was very excited with learning something new like Next.js. It seemed like an easy-going friend, chill and nice.
After putting lots of hours in my last project, I kinda got bored, you know. Like I needed a refreshment. I wanted to know I am not stuck. When learning new stuff, it gives you this pleasant feeling that you are moving on to the next level, that you are making progress.
Of course, this is just the beginning. There is a lot more to learn. But I am happy I did it.
Let's talk
Feel free to share your experiences in the comments. And, people that used Next.js for longer, what would be your advice?
As for me, thank you for reading and see you in the Next.js one! :)
Top comments (2)
If you want a next like experience and are familiar with TypeScript can I suggest having a play with Fresh. It uses Preact under the hood, Vite (as of the last update) and Deno (so TypeScript) but it all still feels very familiar.
Next makes building React apps more enjoyable, especially because of feature like image optimization and pre rendering of pages. I always like building front end websites and apps with it