diff --git a/.eslintrc.js b/.eslintrc.js
index 9f4e641bee..d9075ea9a1 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -34,5 +34,16 @@ module.exports = {
env: {
jest: true,
},
- overrides: [...overrides],
+ overrides: [
+ ...overrides,
+ {
+ files: ['cypress/**/*.spec.ts'],
+ rules: {
+ 'max-nested-callbacks': 0,
+ 'promise/prefer-await-to-then': 0,
+ 'promise/always-return': 0,
+ 'promise/catch-or-return': 0,
+ },
+ },
+ ],
}
diff --git a/cypress/integration/custom-errors.spec.ts b/cypress/integration/custom-errors.spec.ts
new file mode 100644
index 0000000000..03478774de
--- /dev/null
+++ b/cypress/integration/custom-errors.spec.ts
@@ -0,0 +1,14 @@
+/**
+ * @see {@link https://nextjs.org/docs/advanced-features/custom-error-page}
+ */
+ describe('Custom error pages', () => {
+ it('should show custom 404 page on /404', () => {
+ cy.visit('/404', {failOnStatusCode: false})
+ cy.findByText('Custom 404 - Page Not Found')
+ })
+
+ it('should show custom 500 page on /500', () => {
+ cy.visit('/500', {failOnStatusCode: false})
+ cy.findByText('Custom 500 - Server-side error occurred')
+ })
+})
\ No newline at end of file
diff --git a/cypress/integration/default.spec.ts b/cypress/integration/default.spec.ts
new file mode 100644
index 0000000000..28c1c1cdd0
--- /dev/null
+++ b/cypress/integration/default.spec.ts
@@ -0,0 +1,24 @@
+describe('Default site', () => {
+ beforeEach(() => {
+ cy.visit('/')
+ })
+
+ it('loads home page', () => {
+ cy.findByText('Next Demo!')
+ cy.findByTestId("list-server-side").within(() => {
+ cy.findAllByRole("link").should('have.length', 5)
+ })
+
+ cy.findByTestId("list-dynamic-pages").within(() => {
+ cy.findAllByRole("link").should('have.length', 3)
+ })
+
+ cy.findByTestId("list-catch-all").within(() => {
+ cy.findAllByRole("link").should('have.length', 3)
+ })
+
+ cy.findByTestId("list-static").within(() => {
+ cy.findAllByRole("link").should('have.length', 2)
+ })
+ })
+})
\ No newline at end of file
diff --git a/cypress/integration/dynamic-routes.spec.ts b/cypress/integration/dynamic-routes.spec.ts
new file mode 100644
index 0000000000..a0cf095942
--- /dev/null
+++ b/cypress/integration/dynamic-routes.spec.ts
@@ -0,0 +1,7 @@
+describe('Dynamic Routing', () => {
+ it('loads page', () => {
+ cy.visit('/shows/250')
+ cy.findByRole('heading').should('contain', '250')
+ cy.findByText('Kirby Buckets')
+ })
+})
\ No newline at end of file
diff --git a/cypress/integration/headers.spec.ts b/cypress/integration/headers.spec.ts
new file mode 100644
index 0000000000..2b5551ecae
--- /dev/null
+++ b/cypress/integration/headers.spec.ts
@@ -0,0 +1,9 @@
+describe('Headers', () => {
+ it('should set headers from the next.config.js', () => {
+ cy.request({
+ url: '/',
+ }).then((response) => {
+ expect(response.headers).to.have.property('x-custom-header', 'my custom header value')
+ })
+ })
+})
\ No newline at end of file
diff --git a/cypress/integration/i18n.spec.ts b/cypress/integration/i18n.spec.ts
new file mode 100644
index 0000000000..ffe5291943
--- /dev/null
+++ b/cypress/integration/i18n.spec.ts
@@ -0,0 +1,38 @@
+describe('Localization', () => {
+ it('should use sub routing to determine current locale', () => {
+ cy.visit('/');
+
+ cy.findByText('The current locale is en')
+
+ cy.visit('/fr')
+ cy.findByText('The current locale is fr')
+ })
+
+ it('should use the NEXT_LOCALE cookie to determine the default locale', () => {
+ cy.setCookie('NEXT_LOCALE', 'fr')
+ cy.visit('/');
+
+ cy.findByText('The current locale is fr')
+ })
+
+ it('should use the NEXT_LOCALE cookie over Accept-Language header to determine the default locale', () => {
+ // cy.setCookie('NEXT_LOCALE', 'en')
+ cy.visit({
+ url: '/',
+ headers: {
+ 'Accept-Language': 'fr;q=0.9'
+ }
+ });
+ cy.findByText('The current locale is fr')
+
+ cy.setCookie('NEXT_LOCALE', 'en')
+ cy.visit({
+ url: '/',
+ headers: {
+ 'Accept-Language': 'fr;q=0.9'
+ }
+ });
+
+ cy.findByText('The current locale is en')
+ })
+})
\ No newline at end of file
diff --git a/cypress/integration/images.spec.ts b/cypress/integration/images.spec.ts
new file mode 100644
index 0000000000..0d912d33a8
--- /dev/null
+++ b/cypress/integration/images.spec.ts
@@ -0,0 +1,20 @@
+/**
+ * @see {@link https://nextjs.org/docs/api-reference/next/image#required-props}
+ */
+describe('next/images', () => {
+ it('should show static image from /public', () => {
+ cy.visit('/')
+ cy.findByRole('img').should('be.visible').and(($img) => {
+ // "naturalWidth" and "naturalHeight" are set when the image loads
+ expect(
+ $img[0].naturalWidth,
+ 'image has natural width'
+ ).to.be.greaterThan(0)
+ })
+ })
+
+ it('should show image using next/image', () => {
+ cy.visit('/image')
+ cy.findByRole('img', { name: /shiba inu dog looks through a window/i })
+ })
+})
\ No newline at end of file
diff --git a/cypress/integration/preview.spec.ts b/cypress/integration/preview.spec.ts
new file mode 100644
index 0000000000..39d1b66574
--- /dev/null
+++ b/cypress/integration/preview.spec.ts
@@ -0,0 +1,21 @@
+describe('Preview Mode', () => {
+ it('enters and exits preview mode', () => {
+ // preview mode is off by default
+ cy.visit('/previewTest')
+ cy.findByText('Number: 4')
+
+ // enter preview mode
+ cy.request('/api/enterPreview').then(
+ (response) => {
+ expect(response.body).to.have.property('name', 'preview mode')
+ }
+)
+ cy.visit('/previewTest')
+ cy.findByText('Number: 3')
+
+ // exit preview mode
+ cy.request('/api/exitPreview')
+ cy.visit('/previewTest')
+ cy.findByText('Number: 4')
+ })
+})
\ No newline at end of file
diff --git a/cypress/integration/rewrites-redirects.spec.ts b/cypress/integration/rewrites-redirects.spec.ts
new file mode 100644
index 0000000000..bf62ef27b3
--- /dev/null
+++ b/cypress/integration/rewrites-redirects.spec.ts
@@ -0,0 +1,21 @@
+describe('Rewrites and Redirects', () => {
+ it('rewrites: points /old to /', () => {
+ // preview mode is off by default
+ cy.visit('/old')
+ cy.findByText('Next Demo!')
+ cy.url().should('eq', `${Cypress.config().baseUrl}/old/`)
+
+ // ensure headers are still set
+ cy.request('/api/enterPreview').then(
+ (response) => {
+ expect(response.body).to.have.property('name', 'preview mode')
+ }
+)
+ })
+
+ it('redirects: redirects /redirectme to /', () => {
+ cy.visit('/redirectme')
+ cy.url().should('eq', `${Cypress.config().baseUrl}/`)
+ }
+ )
+})
\ No newline at end of file
diff --git a/cypress/integration/trailing-slash.spec.ts b/cypress/integration/trailing-slash.spec.ts
new file mode 100644
index 0000000000..e06e7dd982
--- /dev/null
+++ b/cypress/integration/trailing-slash.spec.ts
@@ -0,0 +1,11 @@
+describe('Trailing slash enabled', () => {
+ it('should keep the trailing slash, i.e. points /old/ to /old/', () => {
+ cy.visit('/old/')
+ cy.url().should('eq', `${Cypress.config().baseUrl}/old/`)
+ })
+
+ it('should put a trailing slash when there is none, i.e. points /old to /old/', () => {
+ cy.visit('/old')
+ cy.url().should('eq', `${Cypress.config().baseUrl}/old/`)
+ })
+})
\ No newline at end of file
diff --git a/demo/next.config.js b/demo/next.config.js
index 3b53233b90..93c2cbab23 100644
--- a/demo/next.config.js
+++ b/demo/next.config.js
@@ -6,9 +6,23 @@ module.exports = {
defaultLocale: 'en',
locales: ['en', 'es', 'fr']
},
- // trailingSlash: true,
+ async headers() {
+ return [
+ {
+ source: '/',
+ headers: [
+ {
+ key: 'x-custom-header',
+ value: 'my custom header value',
+ }
+ ],
+ },
+ ]
+ },
+ trailingSlash: true,
// Configurable site features _to_ support:
// basePath: '/docs',
+ // Rewrites allow you to map an incoming request path to a different destination path.
async rewrites() {
return {
beforeFiles: [
@@ -18,5 +32,15 @@ module.exports = {
}
]
}
- }
+ },
+ // Redirects allow you to redirect an incoming request path to a different destination path.
+ async redirects() {
+ return [
+ {
+ source: '/redirectme',
+ destination: '/',
+ permanent: true,
+ },
+ ]
+ },
}
diff --git a/demo/pages/index.js b/demo/pages/index.js
index d1225acb43..d7e4b6ac2c 100644
--- a/demo/pages/index.js
+++ b/demo/pages/index.js
@@ -1,128 +1,156 @@
import Link from 'next/link'
import dynamic from 'next/dynamic'
const Header = dynamic(() => import(/* webpackChunkName: 'header' */ '../components/Header'), { ssr: true })
+import { useRouter } from 'next/router'
-const Index = ({ shows }) => (
-
-
-
-
-
-
NextJS on Netlify
-
- This is a demo of a NextJS application with Server-Side Rendering (SSR).
-
- It is hosted on Netlify.
-
- Server-side rendering is handled by Netlify Functions.
-
- Minimal configuration is required.
-
- Everything is handled by the next-on-netlify npm
- package.
-
-
-
1. Server-Side Rendering Made Easy
-
- This page is server-side rendered.
-
- It fetches a random list of five TV shows from the TVmaze REST API.
-
- Refresh this page to see it change.
-
+ This is a demo of a NextJS application with Server-Side Rendering (SSR).
+
+ It is hosted on Netlify.
+
+ Server-side rendering is handled by Netlify Functions.
+
+ Minimal configuration is required.
+
+ Everything is handled by the next-on-netlify npm
+ package.
+
+
+
1. Server-Side Rendering Made Easy
+
+ This page is server-side rendered.
+
+ It fetches a random list of five TV shows from the TVmaze REST API.
+
+ Refresh this page to see it change.
+
+ Dynamic pages, introduced in NextJS 9.2, are fully supported.
+
+ Click on a show to check out a server-side rendered page with dynamic routing (/shows/:id).
+
- Dynamic pages, introduced in NextJS 9.2, are fully supported.
-
- Click on a show to check out a server-side rendered page with dynamic routing (/shows/:id).
-
+ next-on-netlify automatically determines which pages are dynamic and which ones are static.
+
+ Only dynamic pages are server-side rendered.
+
+ Static pages are pre-rendered and served directly by Netlify's CDN.
+
- next-on-netlify automatically determines which pages are dynamic and which ones are static.
-
- Only dynamic pages are server-side rendered.
-
- Static pages are pre-rendered and served directly by Netlify's CDN.
-
The single-camera series that mixes live-action and animation stars Jacob Bertrand as the title character. Kirby Buckets introduces viewers to the vivid imagination of charismatic 13-year-old Kirby Buckets, who dreams of becoming a famous animator like his idol, Mac MacCallister. With his two best friends, Fish and Eli, by his side, Kirby navigates his eccentric town of Forest Hills where the trio usually find themselves trying to get out of a predicament before Kirby's sister, Dawn, and her best friend, Belinda, catch them. Along the way, Kirby is joined by his animated characters, each with their own vibrant personality that only he and viewers can see.
The Downton Abbey estate stands a splendid example of confidence and mettle, its family enduring for generations and its staff a well-oiled machine of propriety. But change is afoot at Downton--change far surpassing the new electric lights and telephone. A crisis of inheritance threatens to displace the resident Crawley family, in spite of the best efforts of the noble and compassionate Earl, Robert Crawley; his American heiress wife, Cora his comically implacable, opinionated mother, Violet and his beautiful, eldest daughter, Mary, intent on charting her own course. Reluctantly, the family is forced to welcome its heir apparent, the self-made and proudly modern Matthew Crawley himself none too happy about the new arrangements. As Matthew's bristly relationship with Mary begins to crackle with electricity, hope for the future of Downton's dynasty takes shape. But when petty jealousies and ambitions grow among the family and the staff, scheming and secrets--both delicious and dangerous--threaten to derail the scramble to preserve Downton Abbey. Downton Abbey offers a spot-on portrait of a vanishing way of life.
Girl Meets World is based on ABC's hugely popular sitcom, Boy Meets World (1993). Set in New York City, the show tells the wonderfully funny heartfelt stories that Boy Meets World is renowned for - only this time from a tween girl's perspective - as the curious and bright 7th grader Riley Matthews and her quick-witted friend Maya Fox embark on an unforgettable middle school experience. But their plans for a carefree year will be adjusted slightly under the watchful eyes of Riley's parents - dad Cory, who's also a faculty member (and their new History teacher), and mom Topanga, who owns a trendy after school hangout that specializes in pudding.
In Hell's Kitchen, aspiring chefs are put through an intense culinary academy to prove they possess the right combination of ingredients to win a life-changing grand prize.
-
-