Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/santiagodc8/tu_perfil.net/llms.txt

Use this file to discover all available pages before exploring further.

Vercel is the recommended hosting platform for TuPerfil.net. It auto-detects Next.js 14, handles the App Router’s server and client components correctly, and deploys automatically on every push to main.
1

Push your code to GitHub

Create a repository on GitHub and push your local code:
git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/your-org/tuperfil-net.git
git push -u origin main
2

Import the repository in Vercel

  1. Go to vercel.com and log in.
  2. Click Add New → Project.
  3. Select your GitHub repository from the list and click Import.
Vercel automatically detects that this is a Next.js project and pre-fills the build settings. You do not need to change the framework preset, build command (next build), or output directory.
3

Add environment variables

Before clicking Deploy, scroll down to Environment Variables on the project configuration screen and add all required variables:
NameValueEnvironments
NEXT_PUBLIC_SUPABASE_URLYour Supabase project URLProduction, Preview, Development
NEXT_PUBLIC_SUPABASE_ANON_KEYYour anon public keyProduction, Preview, Development
SUPABASE_SERVICE_ROLE_KEYYour service role keyProduction, Preview, Development
RESEND_API_KEYYour Resend API keyProduction, Preview, Development
You can also add or update these after deployment via Project → Settings → Environment Variables.For optional variables (ADMIN_EMAIL, RESEND_FROM_EMAIL, NEWSLETTER_SECRET) that enable contact email notifications and secure unsubscribe links, see the environment variables reference.
SUPABASE_SERVICE_ROLE_KEY and RESEND_API_KEY must never be set as NEXT_PUBLIC_ variables. Keep them as server-only secrets.
4

Deploy

Click Deploy. Vercel runs npm run build and publishes the result. The first build typically takes 60–90 seconds.Once complete, Vercel provides a deployment URL such as https://tuperfil-net.vercel.app. Open it to verify the site loads correctly.

​
Continuous deployment

After the initial setup, every push to the main branch triggers a new production deployment automatically. Pull requests generate isolated preview deployments with a unique URL, useful for reviewing changes before merging. 
main branch push  →  Production deployment  →  tuperfil.net
Pull request      →  Preview deployment     →  tuperfil-net-abc123.vercel.app

​
Environment variables after deployment

To update environment variables on an existing deployment:
  1. Go to your project in the Vercel dashboard.
  2. Click Settings → Environment Variables.
  3. Edit or add variables as needed.
  4. Redeploy the project for changes to take effect — existing deployments do not pick up new variable values automatically.
You can scope variables to specific environments (Production, Preview, Development). For example, you might point Preview deployments at a separate Supabase project to avoid polluting production data.

​
Incremental Static Regeneration

The homepage uses ISR with a 60-second revalidation window. After publishing a new article in the admin panel, the homepage may serve cached content for up to 60 seconds before reflecting the change. This is by design — it keeps response times fast under traffic while staying close to real-time. Category listing pages and individual article pages use revalidate as well. Refer to the relevant page.tsx files for their specific values.

​
Custom domain

To use a custom domain (e.g. tuperfil.net):
  1. Go to Project → Settings → Domains in the Vercel dashboard.
  2. Add your domain and follow the DNS instructions.
  3. Update the Site URL and Redirect URLs in your Supabase project under Authentication → URL Configuration to include the new domain. Without this, Supabase authentication callbacks will fail on the custom domain.

​
Image optimization

Next.js image optimization is pre-configured to allow images from Supabase Storage. The next.config.mjs already includes the required remote pattern:
next.config.mjs
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "*.supabase.co",
        pathname: "/storage/v1/object/public/**",
      },
    ],
  },
};
This allows the <Image> component to optimize any image served from your Supabase Storage bucket.

Build docs developers (and LLMs) love

Get started for freeTalk to us