# Com utilitzar Next.js per construir aplicacions SaaS modernes Next.js és un potent marc de React que fa que la construcció d'aplicacions web modernes sigui més senzilla i eficient. En aquest article, us guiarem a través d'un procés complet per ensenyar-vos com utilitzar Next.js per construir una aplicació SaaS senzilla. Cobrirà tot el procés, des de la configuració de l'entorn de desenvolupament fins a la creació de funcionalitats bàsiques. ## 1. Preparació de l'entorn Abans de començar, hem d'assegurar-nos que el vostre entorn de desenvolupament estigui preparat. Seguiu els passos següents: ### 1.1 Instal·lar Node.js i npm Assegureu-vos que el vostre ordinador tingui instal·lat Node.js i npm. Podeu executar les següents comandes al terminal per comprovar les versions: ```bash node -v npm -v ``` Si no ho teniu instal·lat, podeu anar a [la pàgina oficial de Node.js](https://nodejs.org/) per descarregar i instal·lar. ### 1.2 Crear un projecte Next.js Executeu la següent comanda al terminal per crear un nou projecte Next.js: ```bash npx create-next-app@latest my-saas-app cd my-saas-app ``` Això crearà un nou projecte anomenat `my-saas-app` i instal·larà automàticament les dependències necessàries. ## 2. Estructura del projecte A la carpeta `my-saas-app`, veureu l'estructura bàsica següent: ``` my-saas-app/ ├── pages/ │ ├── api/ │ ├── _app.js │ ├── index.js │ └── ... ├── public/ ├── styles/ └── ... ``` - **pages/**: Conté les pàgines de l'aplicació. - **public/**: Conté recursos públics, com imatges, icones, etc. - **styles/**: Conté fitxers CSS. ## 3. Construir funcionalitats bàsiques En aquesta secció, implementarem un sistema senzill de registre i inici de sessió d'usuaris. ### 3.1 Configurar la base de dades En aquest exemple, utilitzarem Supabase com a servei de backend. Seguiu els passos següents: 1. Visiteu [la pàgina oficial de Supabase](https://supabase.io/) i creeu un compte. 2. Creeu un nou projecte i anoteu la vostra URL de base de dades i la clau API. 3. Connecteu-vos a la base de dades i creeu la taula d'usuaris següent: ```sql create table users ( id serial primary key, email text unique not null, password text not null ); ``` ### 3.2 Instal·lar el client de Supabase Instal·leu la biblioteca del client de Supabase al projecte Next.js: ```bash npm install @supabase/supabase-js ``` ### 3.3 Crear la pàgina de registre d'usuaris A la carpeta `pages/`, creeu un nou fitxer `register.js` i afegiu el següent contingut: ```jsx import { useState } from 'react'; import { createClient } from '@supabase/supabase-js'; const supabase = createClient('YOUR_SUPABASE_URL', 'YOUR_SUPABASE_ANON_KEY'); const Register = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const handleRegister = async () => { const { user, error } = await supabase.auth.signUp({ email, password, }); if (error) { console.error(error); } else { alert('Registreu-vos amb èxit!'); } }; return ( ); }; export default Register; ``` ### 3.4 Crear la pàgina d'inici de sessió d'usuaris Igualment, a la carpeta `pages/`, creeu un nou fitxer `login.js` i afegiu el següent contingut: ```jsx import { useState } from 'react'; import { createClient } from '@supabase/supabase-js'; const supabase = createClient('YOUR_SUPABASE_URL', 'YOUR_SUPABASE_ANON_KEY'); const Login = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const handleLogin = async () => { const { user, error } = await supabase.auth.signIn({ email, password, }); if (error) { console.error(error); } else { alert('Inici de sessió amb èxit!'); } }; return ( ); }; export default Login; ``` ## 4. Desplegar l'aplicació ### 4.1 Escollir la plataforma de desplegament Utilitzem Vercel per desplegar la nostra aplicació Next.js. Seguiu els passos següents: 1. Visiteu [la pàgina oficial de Vercel](https://vercel.com/) i registreu-vos per un compte. 2. Creeu un nou projecte i seleccioneu el vostre repositori de GitHub. 3. Assegureu-vos d'afegir la URL de Supabase i la clau API a les variables d'entorn. 4. Feu clic a desplegar i espereu que Vercel completi el desplegament. ### 4.2 Verificar el desplegament Un cop completat el desplegament, obtindreu una URL pública. Visiteu aquesta URL per assegurar-vos que l'aplicació funciona correctament. ## 5. Resum A través dels passos d'aquest article, heu aconseguit construir una aplicació SaaS senzilla amb Next.js, incloent funcionalitats de registre i inici de sessió d'usuaris. La potència de Next.js rau en la seva flexibilitat i eficiència, que permet una fàcil expansió per satisfer necessitats més complexes. Esperem que pugueu aprofundir en aquesta base i construir més aplicacions impressionants!