Liitä Next.js-sivusto

Mitä saat: jokainen sivupyyntö Next.js-sivustollesi lähettää sivunäytön Lookuun sivustosi palvelimelta. Sivuillesi ei lisätä skriptiä.

Aika: 20 minuuttia. Tarvitset: asennetun Lookun (Aloita tästä) ja asennuksesta nämä: vastaanottimen osoite (esimerkiksi https://looku.example.com), sivuston tunnus ja allekirjoitusavain.

Miten se toimii

Next.js voi ajaa pienen funktion ennen jokaista sivua. Sen nimi on proxy (Next.js 15:ssä ja vanhemmissa middleware). Lookun liitin toimii siinä: se lukee pyynnön, muodostaa sivunäytön ja lähettää sen Lookuun taustalla vastauksen jälkeen, joten sivu ei hidastu. Sivuihisi ei tarvitse muuttaa mitään.

1. Kopioi liitin projektiisi. Liitin on yksi tiedosto, jolla ei ole riippuvuuksia. npm-pakettia ei ole vielä julkaistu, joten kopioi packages/next/src/index.js Lookun repositoriosta projektiisi nimellä lib/looku.js (luo lib-kansio, jos sinulla ei ole sellaista).

   Jos kloonasit Lookun sivustosi viereen, aja sivustosi kansiossa:

   mkdir -p lib
   cp ../looku/packages/next/src/index.js lib/looku.js

   Jos kloonasit Lookun muualle, korvaa ../looku sillä kansiolla.

2. Luo proxy-tiedosto projektisi juurikansioon (package.json-tiedoston viereen; jos sivusi ovat kansiossa src/app, laita se kansioon src/). Tiedosto riippuu Next.js-versiostasi: katso "next" tiedostosta package.json.

   Jos sinulla on jo proxy- tai middleware-tiedosto, lisää funktioosi import ja rivi trackPageview(request, event);. Tarkista myös, että matcher jättää pois api:n, _next:n, pisteen sisältävät tiedostot ja esilataukset kuten alla. Muuten kuvat ja esilataukset lasketaan sivunäytöiksi.

   Next.js 16 ja uudemmat: proxy.js

   import { NextResponse } from "next/server";
   import { trackPageview } from "./lib/looku.js";
   
   export function proxy(request, event) {
     trackPageview(request, event);
     return NextResponse.next();
   }
   
   export const config = {
     matcher: [
       {
         source: "/((?!api|_next/static|_next/image|.*[.]).*)",
         missing: [
           { type: "header", key: "next-router-prefetch" },
           { type: "header", key: "purpose", value: "prefetch" },
           { type: "header", key: "sec-purpose", value: "(.*)prefetch(.*)" },
         ],
       },
     ],
   };

   Next.js 15 ja vanhemmat: middleware.js

   import { NextResponse } from "next/server";
   import { trackPageview } from "./lib/looku.js";
   
   export function middleware(request, event) {
     trackPageview(request, event);
     return NextResponse.next();
   }
   
   export const config = {
     matcher: [
       {
         source: "/((?!api|_next/static|_next/image|.*[.]).*)",
         missing: [
           { type: "header", key: "next-router-prefetch" },
           { type: "header", key: "purpose", value: "prefetch" },
           { type: "header", key: "sec-purpose", value: "(.*)prefetch(.*)" },
         ],
       },
     ],
   };

   matcher ratkaisee, mille pyynnöille proxy ajetaan: sivuille, mutta ei API-reiteille, Next.js:n omille tiedostoille, tiedostoille, joiden nimessä on piste (kuvat, robots.txt), eikä esilatauksille (sivuille, jotka selain lataa etukäteen, vaikka kävijä ei avaa niitä). Kopioi se sellaisenaan. Piste on kirjoitettu muotoon [.] tarkoituksella: JavaScript-merkkijonossa \. muuttuu tavalliseksi pisteeksi, joka vastaa mitä tahansa merkkiä, ja silloin vain etusivu laskettaisiin.

   Jos lisäät matcheriin omia rivejä, esimerkiksi uudelleenohjauksia varten, anna jokaiselle sama missing-luettelo. Next.js poistaa esilatausten otsakkeet ennen kuin proxy ajetaan, joten vain matcher voi jättää esilataukset pois. Rivi ilman sitä laskee sivunäytöksi jokaisen linkin, jonka selain lataa sivulta etukäteen.

   Jos proxy-tiedostosi on kansiossa src/, import on "../lib/looku.js", kun lib on juuressa, tai "./lib/looku.js", kun lib on kansiossa src/.

3. Lisää kolme asetusta paikallista testausta varten. Luo tai avaa projektin juuressa tiedosto .env.local:

   LOOKU_ENDPOINT=https://looku.example.com
   LOOKU_SITE_ID=myblog
   LOOKU_SIGNING_KEY=allekirjoitusavaimesi

   Tarkista, että .env.local on tiedostossa .gitignore (Next.js-projekteissa se on siellä oletuksena), jotta avain ei koskaan päädy gitiin.

4. Testaa paikallisesti tuotantoversiolla. Liitin lähettää tietoja vain tuotannossa, joten npm run dev ei lähetä mitään (tarkoituksella: muuten oma kehitystyösi näkyisi kävijöinä):

   npm run build
   npm start

   Avaa http://localhost:3000 ja pari sivua ja avaa sitten Lookun kojelauta. Käyntiesi pitäisi näkyä muutamassa sekunnissa. Jos portti 3000 on varattu, käynnistä komennolla npm start -- -p 3001 ja avaa portti 3001. Tämä lähettää koneeltasi oikeita sivunäyttöjä Lookuusi. Niitä on vähän, eivätkä ne haittaa.

5. Lisää asetukset sinne, missä sivusto toimii.

   Vercel

   Valitse Vercelin kojelaudassa projektisi ja sitten Settings → Environment Variables (hakusana: “Environment Variables”; tarkistettu Vercelin dokumentaatiosta marraskuussa 2026). Lisää LOOKU_ENDPOINT, LOOKU_SITE_ID ja LOOKU_SIGNING_KEY yksi kerrallaan: Name, Value, ja valitse ympäristöistä vain Production. Valitse jokaisen jälkeen Save.

   Asetukset koskevat vain uusia julkaisuja, joten julkaise uudelleen: tee commit ja push tiedostoille lib/looku.js ja proxy-tiedosto, tai avaa kohdassa Deployments uusin julkaisu ja valitse Redeploy. Esikatselujulkaisut eivät lähetä mitään, vaikka lisäisit asetukset myös niihin.

   Oma palvelin

   Aseta kolme asetusta ympäristömuuttujiksi sille prosessille, joka ajaa next start -komentoa, samalla tavalla kuin asetat muutkin asetuksesi (.env.production-tiedosto, joka ei ole gitissä, systemd-palvelusi, Dockerin environment: tai palveluntarjoajasi hallintapaneeli). NODE_ENV-arvon on oltava production, ja next start asettaa sen itse. Myös .env.local käy: next start lukee sen, joten omalla palvelimella yksi tiedosto riittää. Kun lisäät tai muutat asetusta, rakenna ja käynnistä uudelleen (npm run build, sitten npm start): Next.js:n vanhemmissa versioissa middleware saa arvot rakennusvaiheessa.

6. Tarkista. Avaa julkaistu sivustosi puhelimella ja sitten Lookun kojelauta. Käynnin pitäisi näkyä muutamassa sekunnissa.

Valinnat

Anna valinnat kolmantena argumenttina: trackPageview(request, event, { excludePaths: ["/admin"] }).

Valinta	Oletus	Mitä tekee
excludePaths	[]	polut, joita ei lasketa. Tekstinä annettu polku jätetään pois kaikkine alapolkuineen ("/admin" jättää pois myös polun /admin/users), ja säännöllistä lauseketta (/^\/draft-/) verrataan polkuun
optOutCookie	ei mitään	{ name: "looku_optout", value: "1" }: selainta, jolla on tämä eväste tällä arvolla, ei lasketa. Esimerkiksi omasi, jotta et laske itseäsi. Katso Omat käynnit pois.
respectDoNotTrack	true	ohittaa kävijät, jotka lähettävät Do Not Track- tai Global Privacy Control -signaalin
requireAcceptLanguage	true	ohittaa pyynnöt, joissa ei ole Accept-Language-otsaketta. Oikeat selaimet lähettävät sen aina, monet botit eivät
requireFetchMetadata	true	ohittaa pyynnöt, joiden tunniste nimeää selaimen, joka lähettää HTTPS:n yli Sec-Fetch-Mode-otsakkeen (Chromium 76, Firefox 90, Safari 16.4 ja uudemmat), kun otsake puuttuu. Selaimen tunnistetta jäljittelevät indeksoijat lähettävät sitä harvoin
enabled	vain tuotannossa	true tai false ohittaa oletuksen

Omat käynnit pois

Omat käyntisi saisivat luvut näyttämään todellista suuremmilta. Liitin ohittaa selaimen, jolla on opt-out-eväste, ja sivustosi oma sivu asettaa evästeen yhdellä napautuksella.

1. Lisää sivu. App Routerissa riittää reitinkäsittelijä. Valitse polku, jota on vaikea arvata, jotta kävijät eivät osu siihen vahingossa:

   app/looku-pois-7h3k/route.js

   export function GET() {
     return new Response("Tämän selaimen käyntejä ei enää lasketa.", {
       headers: {
         "Content-Type": "text/plain; charset=utf-8",
         "Set-Cookie": "looku_optout=1; Path=/; Max-Age=34560000; SameSite=Lax; Secure; HttpOnly",
       },
     });
   }

   (Pages Routerissa sama onnistuu API-reitillä: res.setHeader("Set-Cookie", …).)

2. Kerro liittimelle eväste, ja jätä itse sivu pois:

   trackPageview(request, event, {
     optOutCookie: { name: "looku_optout", value: "1" },
     excludePaths: ["/looku-pois-7h3k"],
   });

3. Julkaise, ja avaa sivu kerran jokaisella käyttämälläsi selaimella, esimerkiksi puhelimella ja kannettavalla.

4. Lisää sivu kojelautaan. Lookun Asetukset-sivulla, kohdassa Omat käynnit pois, kirjoita koko osoite (https://example.com/looku-pois-7h3k) ja valitse Tallenna. Kojelaudan etusivun alareunassa on sen jälkeen linkki jokaisen sivuston sivulle, jolla sellainen on. Uudella puhelimella avaat kojelaudan ja napautat linkkiä.

Eväste kuuluu yhdelle selaimelle. Yksityinen ikkuna unohtaa sen, ja selaimet säilyttävät sen enintään noin 400 päivää, joten avaa linkki uudelleen sen jälkeen tai kun olet tyhjentänyt evästeet. Linkki näkyy vain sinulle, kun olet kirjautunut.

Sivut, joita ei ole

Proxy ajetaan ennen kuin Next.js tietää, onko sivu olemassa, joten väärin kirjoitettu osoite, vanha linkki tai /wp-admin-osoitetta kokeileva botti laskettaisiin sivuksi. Sivustosi catch-all-sivu voi kertoa Lookulle, ettei sivua ole. Looku näyttää silloin nämä sivunäytöt kojelaudassa listassa Puuttuvat sivut eikä laske niitä muihin lukuihin. Tämä vaatii Next.js:n 15.1 tai uudemman ja App Routerin.

1. Välitä osoite eteenpäin. Muuta proxy-tiedoston funktio tällaiseksi (middleware.js:ssä funktion nimi on middleware):

   import { NextResponse } from "next/server";
   import { lookuRequestHeaders, trackPageview } from "./lib/looku.js";
   
   export async function proxy(request, event) {
     trackPageview(request, event);
     return NextResponse.next({ request: { headers: await lookuRequestHeaders(request) } });
   }

   Sivu ei näe osoitetta samalla tavalla kuin proxy, joten proxy välittää osoitteen pyynnön otsakkeessa. Otsake allekirjoitetaan allekirjoitusavaimellasi, joten kävijä ei voi sen avulla merkitä oikeaa sivuasi puuttuvaksi.

2. Lisää catch-all-sivu. Luo app/[...missing]/page.js (tai jos sinulla on jo catch-all-sivu, joka kutsuu notFound()-funktiota, lisää rivit siihen):

   import { headers } from "next/headers";
   import { notFound } from "next/navigation";
   import { after } from "next/server";
   import { trackNotFound } from "../../lib/looku.js";
   
   export default async function MissingPage() {
     const requestHeaders = await headers();
     after(() => trackNotFound(requestHeaders));
     notFound();
   }

   Next.js käyttää catch-all-sivua vain osoitteisiin, joita mikään muu sivu ei vastaa, ja notFound() näyttää oman not-found-sivusi tilakoodilla 404. after lähettää viestin vasta vastauksen jälkeen, joten kukaan ei odota sitä. Älä laita näitä rivejä tiedostoon app/not-found.js: jos pyynnön otsakkeet luetaan siellä, Next.js tekee sivuston jokaisen sivun jokaiselle pyynnölle erikseen eikä kerran käännöksen aikana. Jos annat trackPageview-kutsulle valintoja, anna samat myös lookuRequestHeaders- ja trackNotFound-kutsuille.

   Osoite, joka vastaa parametrillista sivua, esimerkiksi blogikirjoitusta, jota ei ole, saa not-found-sivun ilman tätä sivua, joten se jää sivuihin.

3. Julkaise ja tarkista. Avaa julkaistulla sivustollasi keksitty osoite, esimerkiksi /looku-testi-404, ja sitten kojelauta. Osoite näkyy muutamassa sekunnissa listassa Puuttuvat sivut eikä listassa Suosituimmat sivut.

Looku pitää puuttuvat sivut päivittäin: päivänä, jona sivusto vastasi osoitteeseen “ei löydy”, jokainen näyttö siihen osoitteeseen lasketaan puuttuvaksi. Jos lisäät sivun myöhemmin, se lasketaan sivuksi seuraavasta päivästä alkaen. Puuttuvista sivuista on vain määrä, ei kävijöitä, ja niitä säilytetään yhtä kauan kuin muitakin tietoja.

Ennen käyttöönottoa tallentuneet sivunäytöt jäävät paikalleen. Siirrä ne antamalla osoitteet komennolle pages:missing (komentorivi), esimerkiksi docker compose run --rm ingest pages:missing myblog /wp-admin /vanha-sivu.

Hyvä tietää

• Puuttuvat sivut lasketaan sivuiksi, ellei sivustosi kerro niistä Lookulle; katso Sivut, joita ei ole.
• Selaimen sisäiset siirtymät lasketaan. Kun kävijä napsauttaa linkkiä, Next.js pyytää palvelimelta seuraavan sivun tiedot, ja proxy ajetaan myös sille pyynnölle. matcher ohittaa esilataukset.
• Botit ohitetaan niiden user agent -tunnisteen perusteella, samoin pyynnöt, joissa ei ole Accept-Language-otsaketta, ja pyynnöt, jotka esiintyvät uutena selaimena mutta joista puuttuu sen Sec-Fetch-Mode-otsake. Looku pudottaa myös kävijän, joka lataa yli 4 sivua kolmessa sekunnissa, joten napsauta tavallista tahtia, kun testaat.
• Maa tulee alustalta: Vercelissä otsakkeesta x-vercel-ip-country, Cloudflaressa otsakkeesta CF-IPCountry. Kun sivusto on Vercelissä Cloudflaren takana, Vercel näkee Cloudflaren palvelimen, joten maa luetaan Cloudflarelta. Jos maa jää tyhjäksi, ota Cloudflaressa käyttöön IP Geolocation (Network-asetukset).

Seuraavaksi

• Lukuaika ja vieritys suostumuksen antaneilta kävijöiltä: Selainkeräin.
• Verkkokaupan tilaukset: Verkkokaupan tilaukset.
• Eikö mitään saavu? Sivunäyttöjä ei näy.