learning next js

Next is a React framework to build fast web apps.

Important to know:

page router

Page router vs App router

Pasarle a danny para que entienda App router: https://freedium.cfd/https://javascript.plainenglish.io/next-jss-new-app-vs-pages-router-a-detailed-comparison-46f846963af5
introduced in may this year.
migration guide

page: Pasted image 20231124113243.png
app: Pasted image 20231124113306.png more like sveltekit

app router every dir name defines the URL path.

export default function LoginLayout({ children }) {
  return <div className='login-area'>{children}</div>
// all it needs to do is render a child component, passed autmatically. the child is the page.js component.

layout nesting is supported.

any component in the app dir are now server components by default. this means we can't use client-side features like window object, event listeners or React hooks .
server components are good for hiding code and secrets, don't ship most dependencies, direct access to backend, fully integrate server actions.

client components are declared by stating use client on top of the file.

server actions (experimental)

enable exection of server-side code based on events on the client
Pasted image 20231124134848.png
server actions need to be enabled in the config.
Pasted image 20231124134913.png

App router should become the standard way to build apps.
some features are bound to the Pages Router and, therefore, will not prevail

both routes can be used alongside, Vercel even recommends keeping the pages router while migration, as to not break anything. you can use both (/app/ and /pages/) and not have to migrate the entire app entirely.

import { Metadata } from 'next'
export const metadata: Metadata = {
  title: 'Hello World',
export default function Page() {
  return <></>

Features overview:

one the /learn/ tuto I will learn ab this feats:

developer experience

Next.js comes with built in Typescript, ESLint and hot reloading, and more

In production stage

Next.js optimizes code and makes it accessible. code is compiled, bundled, minified and code split. Next handles a los of the process

Build time is the name given to the series of steps that prepare your app code for prod. When you build, Next.js will transform your code into prod-optimized files ready to be deployed to servers and consumed by users. the files include:

Runtime refers to the period of time when your app runs in response to a user's requests, after your app has been built and deployed.


Nextjs rendering

Next components

Nextjs custom components and Hooks

dynamic routes

Nextjs dynamic routes

The network

In Next.js your app code can be deployed to:

Origin servers

normal server. stores and runs the original version of your app.
When an origin server receives a request, it does computation b4 sending a response. The result of this computation can be moved to a CDN.

CDN servers

CDN store statis content in multiple locations around the world and are placed between the client and the origin server. When a new request comes in, the closes CDN location to hte user can respond with the cached result. This reduces the load on the origin. In Next, since prerendering can be done ahead of time, CDNs are suited to store the result.

Edge servers

generalized concept for the edge of the network, closest to the user.
CDNs can be considered edge bc they distribute static content at the edge.

edge servers are distributed to multiple locations around the world. But unlike CDNs some edge servers can run small snippets of code. This means both caching and code execution can be done at the Edge closer to the user.

By moving some work that was traditionally done client-side or server-side ht hte Edge, you can make your app more performant bc it reduces the amount of code sent to the client.

Static assets

images... robots.txt or any other static asset.
are stored in the top-level dir /public files inside this dir can be referenced from the root of the app, similar to pages/

API routes

Nextjs API routes

404 pages

To create a custom 404 page, create pages/404.js. This file is statically generated at build time.

// pages/404.js
export default function Custom404() {
  return <h1>404 - Page Not Found</h1>;

Deploy - Going to production:




Typescript integration


import { GetStaticProps, GetStaticPaths, GetServerSideProps } from 'next' export const getStaticProps = (async (context) => { // ...}) satisfies GetStaticProps
import type { NextApiRequest, NextApiResponse } from 'next'
export default function handler(req: NextApiRequest, res: NextApiResponse) {
  res.status(200).json({ name: 'John Doe' })
import type { NextApiRequest, NextApiResponse } from 'next'
type Data = {
  name: string
export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  res.status(200).json({ name: 'John Doe' })
import type { AppProps } from 'next/app' export default function MyApp({ Component, pageProps }: AppProps) {  return <Component {...pageProps} />}