Next.js

1npx create-next-app@latest

1cd my-next-app
2edgio init --edgioVersion ^6.0.0

1const { withEdgio, withServiceWorker } = require('@edgio/next/config')
2
3module.exports = withEdgio(
4  withServiceWorker({
5    // Output source maps so that stack traces have original source filenames and line numbers when tailing
6    // the logs in the Edgio Developer console.
7    edgioSourceMaps: true,
8  })
9)

1const { withEdgio, withServiceWorker } = require('@edgio/next/config')
2
3module.exports = withEdgio(
4  withServiceWorker({
5    // Output source maps so that stack traces have original source filenames and line numbers when tailing
6    // the logs in the Edgio Developer console.
7    edgioSourceMaps: true,
8    // Don't include Edgio Devtools in production
9    // More on Edgio Devtools at https://docs.edg.io/applications/performance/observability/devtools
10    disableEdgioDevTools: true,
11  })
12)

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 {nextRoutes} from '@edgio/next';
2import {Router} from '@edgio/core/router';
3
4export default new Router()
5  .get('/service-worker.js', ({cache, serveStatic}) => {
6    cache({
7      edge: {
8        maxAgeSeconds: 60 * 60 * 24 * 365,
9      },
10    });
11    serveStatic('.next/static/service-worker.js');
12  })
13  .use(nextRoutes);

1import {Router} from '@edgio/core/router';
2import {nextRoutes, renderNextPage} from '@edgio/next';
3
4export default new Router()
5  .match(
6    {
7      path: '/:path*',
8      cookies: {
9        __prerender_bypass: /.*/g,
10        __next_preview_data: /.*/g,
11      },
12    },
13    ({cache, renderWithApp}) => {
14      cache({
15        edge: false,
16        browser: false,
17      });
18      renderNextPage('/:path*', res); // In case you're using Next.js < v12
19      // renderWithApp() // In case you're using Next.js >= v12
20    }
21  )
22  .get('/service-worker.js', ({cache, serveStatic}) => {
23    cache({
24      edge: {
25        maxAgeSeconds: 60 * 60 * 24 * 365,
26      },
27    });
28    serveStatic('.next/static/service-worker.js');
29  })
30  .use(nextRoutes);

1import {nextRoutes} from '@edgio/next';
2import {Router} from '@edgio/core/router';
3
4export default new Router().use(nextRoutes);
5match('/:path*', ({proxy}) => proxy('legacy'));

1module.exports = {
2  backends: {
3    legacy: {
4      domainOrIp: process.env.LEGACY_BACKEND_DOMAIN || 'legacy.my-site.com',
5      hostHeader:
6        process.env.LEGACY_BACKEND_HOST_HEADER || 'legacy.my-site.com',
7    },
8  },
9};

1export default new Router()
2  // Products - SSR
3  .get('/p/:productId', ({cache}) => {
4    cache({
5      // Caching it only on the edge
6      edge: {
7        maxAgeSeconds: 60 * 60 * 24,
8        staleWhileRevalidateSeconds: 60 * 60,
9      },
10    });
11  })
12  // Products - getServerSideProps
13  .get('/_next/data/:version/p/:productId.json', ({cache}) => {
14    cache({
15      // Allowing service worker (if present) to serve the cached responses from the browser itself
16      browser: {
17        maxAgeSeconds: 0,
18        serviceWorkerSeconds: 60 * 60 * 24,
19      },
20      edge: {
21        maxAgeSeconds: 60 * 60 * 24,
22        staleWhileRevalidateSeconds: 60 * 60,
23      },
24    });
25  })
26  .use(nextRoutes);

1new Router().get('/my-private-page', ({setResponseHeader}) => {
2  setResponseHeader(
3    'cache-control',
4    'private, no-cache, no-store, must-revalidate'
5  );
6});

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')
8      )), // <~ need to explicitly pass the config here.
9      // Will be passed to the page component as props
10    },
11  };
12}

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

1module.exports = {
2  connector: '@edgio/next',
3  includeFiles: {
4    public: true,
5  },
6};

1module.exports = {
2  /* ... */
3  disableImageOptimizer: true,
4};

1import {nextRoutes} from '@edgio/next';
2import {Router} from '@edgio/core/router';
3
4nextRoutes.setEnforceTrailingSlash(true);
5
6export default new Router().use(nextRoutes);

1const params = {
2  query: {
3    slug: ['value', 'value2'],
4    'slug[0]': 'value',
5    'slug[1]': 'value2',
6  },
7};

1const params = {
2  query: {
3    slug: ['value', 'value2'],
4  },
5};

1import {nextRoutes} from '@edgio/next';
2import {Router} from '@edgio/core/router';
3
4nextRoutes.setQueryDuplicatesToArrayOnly(true);
5
6export default new Router().use(nextRoutes);