Support for i18n in Next 10

cypress/fixtures/next.config.js

@@ -1,3 +1,3 @@
 module.exports = {
- target: "serverless",
+ target: "experimental-serverless-trace",
 };

cypress/fixtures/next.config.js-with-i18n

@@ -0,0 +1,7 @@
+module.exports = {
+ target: "experimental-serverless-trace",
+ i18n: {
+ locales: ["en", "fr"],
+ defaultLocale: "en"
+ }
+};

cypress/fixtures/pages-with-i18n/api/enterPreview.js

@@ -0,0 +1,12 @@
+export default async function preview(req, res) {
+ const { query } = req;
+ const { id } = query;
+
+ // Enable Preview Mode by setting the cookies
+ res.setPreviewData({});
+
+ // Redirect to the path from the fetched post
+ // We don't redirect to req.query.slug as that might lead to open redirect vulnerabilities
+ res.writeHead(307, { Location: `/previewTest/${id}` });
+ res.end();
+}

cypress/fixtures/pages-with-i18n/api/enterPreviewStatic.js

@@ -0,0 +1,12 @@
+export default async function preview(req, res) {
+ const { query } = req;
+ const { id } = query;
+
+ // Enable Preview Mode by setting the cookies
+ res.setPreviewData({});
+
+ // Redirect to the path from the fetched post
+ // We don't redirect to req.query.slug as that might lead to open redirect vulnerabilities
+ res.writeHead(307, { Location: `/previewTest/static` });
+ res.end();
+}

cypress/fixtures/pages-with-i18n/api/exitPreview.js

@@ -0,0 +1,8 @@
+export default async function exit(_, res) {
+ // Exit the current user from "Preview Mode". This function accepts no args.
+ res.clearPreviewData();
+
+ // Redirect the user back to the index page.
+ res.writeHead(307, { Location: "/" });
+ res.end();
+}

cypress/fixtures/pages-with-i18n/api/redirect.js

@@ -0,0 +1,6 @@
+export default async function preview(req, res) {
+ const { query } = req;
+ const { to } = query;
+
+ res.redirect(`/shows/${to}`);
+}

cypress/fixtures/pages-with-i18n/api/shows/[...params].js

@@ -0,0 +1,23 @@
+export default async (req, res) => {
+ // Get the params and query string parameters
+ const { query } = req;
+ const { params, ...queryStringParams } = query;
+
+ // Get the ID of the show
+ const id = params[0];
+
+ // Get the data
+ const fetchRes = await fetch(`https://api.tvmaze.com/shows/${id}`);
+ const data = await fetchRes.json();
+
+ // If show was found, return it
+ if (fetchRes.status == 200) {
+ res.status(200);
+ res.json({ params, queryStringParams, show: data });
+ }
+ // If show was not found, return error
+ else {
+ res.status(404);
+ res.json({ error: "Show not found" });
+ }
+};

cypress/fixtures/pages-with-i18n/api/shows/[id].js

@@ -0,0 +1,20 @@
+export default async (req, res) => {
+ // Get the ID of the show
+ const { query } = req;
+ const { id } = query;
+
+ // Get the data
+ const fetchRes = await fetch(`https://api.tvmaze.com/shows/${id}`);
+ const data = await fetchRes.json();
+
+ // If show was found, return it
+ if (fetchRes.status == 200) {
+ res.status(200);
+ res.json({ show: data });
+ }
+ // If show was not found, return error
+ else {
+ res.status(404);
+ res.json({ error: "Show not found" });
+ }
+};

cypress/fixtures/pages-with-i18n/api/static.js

@@ -0,0 +1,7 @@
+export default (req, res) => {
+ // We can set custom headers
+ res.setHeader("My-Custom-Header", "header123");
+
+ res.status(200);
+ res.json({ message: "hello world :)" });
+};

cypress/fixtures/pages-with-i18n/getServerSideProps/[id].js

@@ -0,0 +1,54 @@
+import Error from "next/error";
+import Link from "next/link";
+
+const Show = ({ errorCode, show }) => {
+ // If show item was not found, render 404 page
+ if (errorCode) {
+ return <Error statusCode={errorCode} />;
+ }
+
+ // Otherwise, render show
+ return (
+ <div>
+ <p>
+ This page uses getInitialProps() to fetch the show with the ID provided
+ in the URL: /shows/:id
+ <br />
+ Refresh the page to see server-side rendering in action.
+ <br />
+ You can also try changing the ID to any other number between 1-10000.
+ </p>
+
+ <hr />
+
+ <h1>Show #{show.id}</h1>
+ <p>{show.name}</p>
+
+ <hr />
+
+ <Link href="/">
+ <a>Go back home</a>
+ </Link>
+ </div>
+ );
+};
+
+export const getServerSideProps = async ({ params }) => {
+ // The ID to render
+ const { id } = params;
+
+ const res = await fetch(`https://api.tvmaze.com/shows/${id}`);
+ const data = await res.json();
+
+ // Set error code if show item could not be found
+ const errorCode = res.status > 200 ? res.status : false;
+
+ return {
+ props: {
+ errorCode,
+ show: data,
+ },
+ };
+};
+
+export default Show;

cypress/fixtures/pages-with-i18n/getServerSideProps/catch/all/[...slug].js

@@ -0,0 +1,55 @@
+import Error from "next/error";
+import Link from "next/link";
+
+const Show = ({ errorCode, show }) => {
+ // If show item was not found, render 404 page
+ if (errorCode) {
+ return <Error statusCode={errorCode} />;
+ }
+
+ // Otherwise, render show
+ return (
+ <div>
+ <p>
+ This page uses getInitialProps() to fetch the show with the ID provided
+ in the URL: /shows/:id
+ <br />
+ Refresh the page to see server-side rendering in action.
+ <br />
+ You can also try changing the ID to any other number between 1-10000.
+ </p>
+
+ <hr />
+
+ <h1>Show #{show.id}</h1>
+ <p>{show.name}</p>
+
+ <hr />
+
+ <Link href="/">
+ <a>Go back home</a>
+ </Link>
+ </div>
+ );
+};
+
+export const getServerSideProps = async ({ params }) => {
+ // The ID to render
+ const { slug } = params;
+ const id = slug[0];
+
+ const res = await fetch(`https://api.tvmaze.com/shows/${id}`);
+ const data = await res.json();
+
+ // Set error code if show item could not be found
+ const errorCode = res.status > 200 ? res.status : false;
+
+ return {
+ props: {
+ errorCode,
+ show: data,
+ },
+ };
+};
+
+export default Show;

cypress/fixtures/pages-with-i18n/getServerSideProps/static.js

@@ -0,0 +1,38 @@
+import Link from "next/link";
+
+const Show = ({ show }) => (
+ <div>
+ <p>
+ This page uses getInitialProps() to fetch the show with the ID provided in
+ the URL: /shows/:id
+ <br />
+ Refresh the page to see server-side rendering in action.
+ <br />
+ You can also try changing the ID to any other number between 1-10000.
+ </p>
+
+ <hr />
+
+ <h1>Show #{show.id}</h1>
+ <p>{show.name}</p>
+
+ <hr />
+
+ <Link href="/">
+ <a>Go back home</a>
+ </Link>
+ </div>
+);
+
+export const getServerSideProps = async ({ params }) => {
+ const res = await fetch("https://api.tvmaze.com/shows/42");
+ const data = await res.json();
+
+ return {
+ props: {
+ show: data,
+ },
+ };
+};
+
+export default Show;

cypress/fixtures/pages-with-i18n/getStaticProps/[id].js

@@ -0,0 +1,43 @@
+import Link from "next/link";
+
+const Show = ({ show }) => (
+ <div>
+ <p>This page uses getStaticProps() to pre-fetch a TV show.</p>
+
+ <hr />
+
+ <h1>Show #{show.id}</h1>
+ <p>{show.name}</p>
+
+ <hr />
+
+ <Link href="/">
+ <a>Go back home</a>
+ </Link>
+ </div>
+);
+
+export async function getStaticPaths() {
+ // Set the paths we want to pre-render
+ const paths = [{ params: { id: "1" } }, { params: { id: "2" } }];
+
+ // We'll pre-render only these paths at build time.
+ // { fallback: false } means other routes should 404.
+ return { paths, fallback: false };
+}
+
+export async function getStaticProps({ params }) {
+ // The ID to render
+ const { id } = params;
+
+ const res = await fetch(`https://api.tvmaze.com/shows/${id}`);
+ const data = await res.json();
+
+ return {
+ props: {
+ show: data,
+ },
+ };
+}
+
+export default Show;

cypress/fixtures/pages-with-i18n/getStaticProps/static.js

@@ -0,0 +1,31 @@
+import Link from "next/link";
+
+const Show = ({ show }) => (
+ <div>
+ <p>This page uses getStaticProps() to pre-fetch a TV show.</p>
+
+ <hr />
+
+ <h1>Show #{show.id}</h1>
+ <p>{show.name}</p>
+
+ <hr />
+
+ <Link href="/">
+ <a>Go back home</a>
+ </Link>
+ </div>
+);
+
+export async function getStaticProps(context) {
+ const res = await fetch(`https://api.tvmaze.com/shows/71`);
+ const data = await res.json();
+
+ return {
+ props: {
+ show: data,
+ },
+ };
+}
+
+export default Show;

cypress/fixtures/pages-with-i18n/getStaticProps/with-revalidate.js

@@ -0,0 +1,32 @@
+import Link from "next/link";
+
+const Show = ({ show }) => (
+ <div>
+ <p>This page uses getStaticProps() to pre-fetch a TV show.</p>
+
+ <hr />
+
+ <h1>Show #{show.id}</h1>
+ <p>{show.name}</p>
+
+ <hr />
+
+ <Link href="/">
+ <a>Go back home</a>
+ </Link>
+ </div>
+);
+
+export async function getStaticProps(context) {
+ const res = await fetch(`https://api.tvmaze.com/shows/71`);
+ const data = await res.json();
+
+ return {
+ props: {
+ show: data,
+ },
+ revalidate: 1,
+ };
+}
+
+export default Show;