Next.js

1npx create-next-app@latest

1cd my-next-app
2edgio init --edgioVersion latest

1const { withEdgio } = require('@edgio/next/config')
2
3module.exports = withEdgio({
4    // Next.js config options
5})

1edgio dev

1edgio deploy

1import { Prefetcher } from '@edgio/prefetch/sw';
2
3new Prefetcher().route();

1import {Prefetch} from '@edgio/react';
2import Link from 'next/link';
3import {useRouter} from 'next/router';
4import {createNextDataURL} from '@edgio/next/client';
5
6export default function ProductListing({products}) {
7  const {locale} = useRouter(); // you can omit this if you're not using localization
8
9  return (
10    <ul>
11      {products.map((product, i) => (
12        <li key={i}>
13          <Link href={product.url} passHref>
14            <Prefetch
15              url={createNextDataURL({
16                href: product.url,
17                locale, // you can omit this if you're not using localization
18                routeParams: {
19                  // keys must match the param names in your next page routes
20                  // So for example if your product page is /products/[productId].js:
21                  productId: product.id,
22                },
23              })}>
24              <a>
25                <img src={product.thumbnail} />
26              </a>
27            </Prefetch>
28          </Link>
29        </li>
30      ))}
31    </ul>
32  );
33}
34
35export async function getServerSideProps({params: {id}}) {
36  const products = await fetch(/* fetch from your api */).then((res) =>
37    res.json()
38  );
39
40  return {
41    props: {
42      products,
43    },
44  };
45}

1import {useServiceWorker} from '@edgio/react';
2const MyApp = ({Component, pageProps}) => {
3  useServiceWorker({
4    // set to `true` to install the service worker in development mode
5    dev: false,
6  });
7  // ... rest of your _app.js code
8};

1import {nextRoutes} from '@edgio/next';
2import {Router} from '@edgio/core/router';
3
4export default new Router()
5  // By default send all requests to the Next.js app
6  .use(nextRoutes);

1module.exports = {
2  connector: '@edgio/next',
3  origins: [
4    {
5      name: 'api',
6      hosts: [
7        {
8          scheme: 'match',
9          location: [
10            {
11              hostname: 'api-origin.myapp.com',
12            },
13          ],
14        },
15      ],
16    },
17  ],
18};

1export default new Router()
2  // By default send all requests to the Next.js app
3  .use(nextRoutes)
4  // Override the default behavior to route requests to /api/* to the api origin
5  .match('/api/:path*', {
6    origin: {
7      set_origin: 'api',
8    },
9  });

1import {Router} from '@edgio/core/router';
2import {nextRoutes} from '@edgio/next';
3
4export default new Router()
5  // By default send all requests to the Next.js app
6  .use(nextRoutes)
7  // Disable caching for preview mode
8  .match(
9    {
10      cookies: {
11        __prerender_bypass: /.*/g,
12        __next_preview_data: /.*/g,
13      },
14    },
15    {
16      caching: {
17        bypass_cache: true,
18        bypass_client_cache: true,
19      },
20    }
21  );

1export default new Router()
2  .use(nextRoutes)
3  // Products - SSR
4  .get('/p/:productId', {
5    caching: {
6      // Ignore the cache-control header generated by Next.js
7      ignore_origin_no_cache: [200],
8      // cache at the edge for one day
9      max_age: '1d',
10      // continue to serve stale responses for up to one hour while revalidating
11      stale_while_revalidate: '1h',
12      // don't cache the response in the browser
13      bypass_client_cache: true
14    },
15  })
16  // Products - getServerSideProps
17  .get('/_next/data/:version/p/:productId.json', {
18    caching: {
19      // Ignore the cache-control header generated by Next.js
20      ignore_origin_no_cache: [200],
21      // cache at the edge for one day
22      max_age: '1d',
23      // continue to serve stale responses for up to one hour while revalidating
24      stale_while_revalidate: '1h',
25      // disable caching in the browser's http cache
26      bypass_client_cache: true
27      // instead cache in the browser using the service worker for one hour - this allows us to prefetch API calls
28      service_worker_max_age: '1h'
29    },
30  })

1new Router()
2  // By default send all requests to the Next.js app
3  .use(nextRoutes)
4  // Disable caching in downstream CDNs for a specific page
5  .get('/my-private-page', {
6    caching: {
7      bypass_client_cache: true, // this will prevent downstream CDNs from caching the response
8    },
9  });

1export default appWithTranslation(MyApp, require('../i18next.config')); // <~ need to explicitly pass the config here

1export async function getStaticProps({locale}) {
2  return {
3    props: {
4      ...(await serverSideTranslations(
5        locale,
6        ['common', 'footer'],
7        require('../i18next.config') // <~ need to explicitly pass the config here.
8      )),
9      // Will be passed to the page component as props
10    },
11  };
12}

1const { withEdgio } = require('@edgio/next/config')
2const { i18n } = require('./i18next.config')
3
4module.exports = withEdgio({
5    i18n,
6  });

1module.exports = {
2  connector: '@edgio/next',
3
4  serverless: {
5    include: ['public/**/*'],
6  },
7};

1module.exports = {
2  next: {
3    disableImageOptimizer: true,
4  },
5};

1export async function getStaticProps({params}) {
2  const res = await fetch(`https://.../posts/${params.id}`);
3  const post = await res.json();
4
5  return {
6    props: {
7      post,
8    },
9    revalidate: 60, // In seconds
10  };
11}