Merge branch 'canary' into chore/update-supabase-example

docs/02-app/02-api-reference/04-functions/use-router.mdx

@@ -80,7 +80,7 @@ export function NavigationEvents() {
   const searchParams = useSearchParams()
 
   useEffect(() => {
-    const url = pathname + searchParams.toString()
+    const url = `${pathname}?${searchParams}`
     console.log(url)
     // You can now use the current URL
     // ...

examples/auth0/package.json

@@ -6,7 +6,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "@auth0/nextjs-auth0": "^1.9.1",
+    "@auth0/nextjs-auth0": "^2.2.0",
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

examples/auth0/pages/_app.tsx

@@ -1,4 +1,4 @@
-import { UserProvider } from '@auth0/nextjs-auth0'
+import { UserProvider } from '@auth0/nextjs-auth0/client'
 
 export default function App({ Component, pageProps }) {
   // optionally pass the 'user' prop from pages that require server-side

examples/auth0/pages/about.tsx

@@ -1,4 +1,4 @@
-import { useUser } from '@auth0/nextjs-auth0'
+import { useUser } from '@auth0/nextjs-auth0/client'
 import Layout from '../components/layout'
 
 const About = () => {

examples/auth0/pages/advanced/api-profile.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { useUser } from '@auth0/nextjs-auth0'
+import { useUser } from '@auth0/nextjs-auth0/client'
 import Layout from '../../components/layout'
 
 const ApiProfile = () => {

examples/auth0/pages/api/protected-api.ts

@@ -4,7 +4,7 @@ import { withApiAuthRequired, getSession } from '@auth0/nextjs-auth0'
 // Protected API, requests to '/api/protected' without a valid session cookie will fail
 
 async function handle(req, res) {
-  const { user } = getSession(req, res)
+  const { user } = await getSession(req, res)
 
   try {
     res.status(200).json({

examples/auth0/pages/index.tsx

@@ -1,4 +1,4 @@
-import { useUser } from '@auth0/nextjs-auth0'
+import { useUser } from '@auth0/nextjs-auth0/client'
 import Layout from '../components/layout'
 
 const Home = () => {

examples/auth0/pages/profile.tsx

@@ -1,4 +1,4 @@
-import { withPageAuthRequired } from '@auth0/nextjs-auth0'
+import { withPageAuthRequired } from '@auth0/nextjs-auth0/client'
 import Layout from '../components/layout'
 import { User } from '../interfaces'
 

examples/cms-strapi/README.md

@@ -1,3 +1,3 @@
 ## Deprecated
 
-The Strapi CMS example is deprecated. Please check out [Strapi’s official demo application](https://github.com/strapi/foodadvisor/).
+The Strapi CMS example is deprecated. Please check out [Strapi’s official demo application](https://github.com/strapi/nextjs-corporate-starter).

examples/with-elasticsearch/package.json

@@ -7,9 +7,15 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@elastic/elasticsearch": "^8.1.0",
+    "@elastic/elasticsearch": "^8.6.0",
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.18",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "typescript": "^4.8.2"
   }
 }

examples/with-elasticsearch/pages/_app.tsx

@@ -0,0 +1,6 @@
+import type { AppProps } from 'next/app'
+import '@/styles/globals.css'
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}

examples/with-elasticsearch/pages/index.tsx

@@ -0,0 +1,158 @@
+import type { InferGetServerSidePropsType } from 'next'
+import Head from 'next/head'
+import Image from 'next/image'
+import styles from '@/styles/Home.module.css'
+import { Inter } from 'next/font/google'
+import { connectToElasticsearch } from '@/lib/elasticsearch'
+
+const inter = Inter({ subsets: ['latin'] })
+
+type HomePageProps = InferGetServerSidePropsType<typeof getServerSideProps>
+
+export default function Home({ isConnected }: HomePageProps) {
+  const connectionStatus = isConnected ? (
+    <p>You are connected to Elasticsearch</p>
+  ) : (
+    <p>
+      You are NOT connected to Elasticsearch. Check the{' '}
+      <code className={styles.code}>README.md</code> for instructions.
+    </p>
+  )
+
+  return (
+    <>
+      <Head>
+        <title>Create Next App</title>
+        <meta name="description" content="Generated by create next app" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <main className={styles.main}>
+        <div className={styles.description}>
+          <p>
+            Get started by editing&nbsp;
+            <code className={styles.code}>pages/index.tsx</code>
+          </p>
+          <div>
+            <a
+              href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              By{' '}
+              <Image
+                src="/vercel.svg"
+                alt="Vercel Logo"
+                className={styles.vercelLogo}
+                width={100}
+                height={24}
+                priority
+              />
+            </a>
+          </div>
+        </div>
+
+        <div className={styles.center} style={{ paddingBottom: 0 }}>
+          <Image
+            className={styles.logo}
+            src="/next.svg"
+            alt="Next.js Logo"
+            width={180}
+            height={37}
+            priority
+          />
+          <div className={styles.thirteen}>
+            <Image
+              src="/thirteen.svg"
+              alt="13"
+              width={40}
+              height={31}
+              priority
+            />
+          </div>
+        </div>
+
+        <div
+          className={`${styles.center} ${inter.className}`}
+          style={{ paddingBlock: 20 }}
+        >
+          <h2>with Elasticsearch</h2>
+        </div>
+
+        <div className={`${styles.center} ${styles.status}`}>
+          {connectionStatus}
+        </div>
+
+        <div className={styles.grid}>
+          <a
+            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            className={styles.card}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <h2 className={inter.className}>
+              Docs <span>-&gt;</span>
+            </h2>
+            <p className={inter.className}>
+              Find in-depth information about Next.js features and&nbsp;API.
+            </p>
+          </a>
+
+          <a
+            href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            className={styles.card}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <h2 className={inter.className}>
+              Learn <span>-&gt;</span>
+            </h2>
+            <p className={inter.className}>
+              Learn about Next.js in an interactive course with&nbsp;quizzes!
+            </p>
+          </a>
+
+          <a
+            href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            className={styles.card}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <h2 className={inter.className}>
+              Templates <span>-&gt;</span>
+            </h2>
+            <p className={inter.className}>
+              Discover and deploy boilerplate example Next.js&nbsp;projects.
+            </p>
+          </a>
+
+          <a
+            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            className={styles.card}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <h2 className={inter.className}>
+              Deploy <span>-&gt;</span>
+            </h2>
+            <p className={inter.className}>
+              Instantly deploy your Next.js site to a shareable URL
+              with&nbsp;Vercel.
+            </p>
+          </a>
+        </div>
+      </main>
+    </>
+  )
+}
+
+export const getServerSideProps = async () => {
+  let isConnected: boolean = false
+  const client = await connectToElasticsearch()
+  if (client !== 'ERR_ENV_NOT_DEFINED') {
+    isConnected = true
+  }
+  return {
+    props: { isConnected },
+  }
+}