Como trabalhar com cookies no Next.js 13?

Introdução

Você sabia que, enquanto você navega pela web, os cookies estão sempre em ação? Esses pequenos arquivos têm o poder de acompanhar sua atividade online e até mesmo influenciar suas experiências na internet. Mas o que exatamente são os cookies e por que eles despertam tanto interesse e preocupação? Eles são inofensivos ou representam uma ameaça à privacidade?

Versão em vídeo

O que são cookies?

Cookies são pequenos arquivos de texto armazenados no seu navegador quando você visita um site. Eles são usados para coletar informações sobre suas atividades online e ajudar a personalizar sua experiência na web.

Quando você visita um site, o servidor desse site envia um cookie para o seu navegador, que o armazena no seu computador ou dispositivo. Esse cookie contém informações como preferências de idioma, itens no seu carrinho de compras ou até mesmo seu nome de usuário e senha, se você escolher lembrar-se deles.

De forma resumida, cookies são uma forma do site se lembrar de você, ou seja, guardar informações sobre sua navegação. Exemplo prático, pesquise dev junior alves do Google: ![[Screenshot 2023-05-20 at 7.04.54 AM.png]] Perceba que o primeiro link está com uma cor diferente, isso é possível pois o Google "sabe" que eu já acessei esse site maravilhoso antes, isso, graças aos cookies.

Cookies com Next.js

Trabalhar com os cookies no Next.js é muito simples. E existem basicamente duas formas (built-in):

• Através da função cookies() ;
• Utilizando os middlewares.

Função cookies()

A função cookie vem de next/headers e podemos realizar algumas operações:

get()

import { cookies } form 'next/headers';
 
export default function Page() {
	const name = cookies().get('name');
 
	console.log(name) // { name: 'name', value: 'Junior' }
}

getAll()

import { cookies } form 'next/headers';
 
export default function Page() {
	const allCookies = cookies().getAll();
	// retorna uma array de cookies
}

has()

import { cookies } form 'next/headers';
 
export default function Page() {
	const hasCookieName = cookies().has('name');
	// returna: true ou false
}

set()

Esse método só está disponível em Server Action ou em uma Route Handler.

import { cookies } form 'next/headers';
 
export default function Page() {
	async function serverAction(data: FormData) {
		'use server';
		cookies().set('name', 'junior');
		cookies().set({ 
			name: 'lastname', 
			value: 'alves', 
			httpOnly: true, 
			path: '/', 
		});
	}
}

delete()

Esse método só está disponível em Server Action ou em uma Route Handler.

async function serverAction(data: FormData) {
	'use server';
	cookies().delete('name');
}

Middleware

É uma forma de interceptar uma requisição antes dela ser finalizada e, com base na request, podemos modificar a response, redirecionar, modificar headers ou retornar a resposta de forma direta. Entenda mais sobre os middlewares aqui

Cookies dentro de um middleware

Primeiro passo é criar o middleware.

O middleware precisa estar no mesmo nível da pasta app ou pages. Exemplo: src/pages -> src/middleware.ts src/app -> src/middleware.ts

Retornando todos os cookies:

import { NextRequest, NextResponse } from 'next/server';
 
export function middleware(req: NextRequest) {
	const response = NextResponse.next();
	response.cookies.set('name', 'junior');
	
	const cookies = req.cookies;
	console.log(cookies); // { "name":{"name":"name","value":"junior"} }
 
	// Ou com o getAll()
	const cookies = req.cookies.getAll();
	console.log(cookies); //  [ { name: 'lastname', value: 'alves' } ]
}

Obtendo um cookie específico:

import { NextRequest, NextResponse } from 'next/server';
 
export function middleware(req: NextRequest) {
	const response = NextResponse.next();
	response.cookies.set('name', 'junior');
	
	const nameCookie = req.cookies.get('name');
	console.log(nameCookie); // { name: 'name', value: 'junior' }
 
	// Se precisar apenas do value
	const nameCookie = req.cookies.get('name')?.value;
	console.log(nameCookie); // junior
}

Criando um cookie:

import { NextRequest, NextResponse } from 'next/server';
 
export function middleware(req: NextRequest) {
	const response = NextResponse.next();
	response.cookies.set('name', 'junior', {
		httpOnly: true,
		secure: true
	});
}

Conclusão

Os cookies são uma ferramenta sensacional que podemos utilizar afim de melhorar a experiência do usuário por meio de informações de navegação. Para inúmeros casos, é preferível utilizar os cookies ao invés do localStorage, por questão de segurança. Nesse post, vimos 2 maneiras de trabalhar com cookies utilizando o Next.js, com a função cookies() e com middleware. Muito obrigado por ter lido até aqui, grande abraço e até o próximo post! Curtiu o post? Então compartilhe para que mais pessoas possam aprender mais sobre os cookies.