chore: update Next.js example, bump dependencies

apps/dev/package.json

@@ -20,14 +20,14 @@
     "@next-auth/prisma-adapter": "^1",
     "@prisma/client": "^3",
     "faunadb": "^4",
-    "next": "12.1.7-canary.51",
+    "next": "12.2.0",
     "nodemailer": "^6",
     "react": "^18",
     "react-dom": "^18"
   },
   "devDependencies": {
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "concurrently": "^7",
     "cpx": "^1.5.0",
     "fake-smtp-server": "^0.8.0",

apps/example-nextjs/package.json

@@ -1,40 +1,32 @@
 {
-  "name": "next-auth-example",
-  "version": "0.0.0",
   "private": true,
-  "description": "An example project for NextAuth.js",
+  "description": "An example project for NextAuth.js with Next.js",
   "repository": "https://github.com/nextauthjs/next-auth-example.git",
   "bugs": {
     "url": "https://github.com/nextauthjs/next-auth/issues"
   },
   "homepage": "https://next-auth-example.vercel.app",
-  "main": "",
   "scripts": {
     "dev": "next",
     "build": "next build",
-    "start": "next start",
-    "types": "tsc --noEmit"
+    "start": "next start"
   },
   "author": "Iain Collins <me@iaincollins.com>",
   "contributors": [
     "Balázs Orbán <info@balazsorban.com>",
     "Nico Domino <yo@ndo.dev>",
     "Lluis Agusti <hi@llu.lu>"
   ],
-  "license": "ISC",
   "dependencies": {
-    "next": "12.1.7-canary.51",
+    "next": "latest",
     "next-auth": "latest",
     "nodemailer": "^6",
-    "react": "^18",
-    "react-dom": "^18"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@types/node": "^17",
-    "@types/react": "^18",
+    "@types/react": "^18.0.15",
     "typescript": "^4"
-  },
-  "prettier": {
-    "semi": false
   }
 }

apps/example-nextjs/pages/_app.tsx

@@ -1,7 +1,8 @@
 import { SessionProvider } from "next-auth/react"
-import type { AppProps } from "next/app"
 import "./styles.css"
 
+import type { AppProps } from "next/app"
+
 // Use of the <SessionProvider> is mandatory to allow components that call
 // `useSession()` anywhere in your application to access the `session` object.
 export default function App({ Component, pageProps }: AppProps) {

apps/example-nextjs/pages/api/examples/jwt.ts

@@ -1,10 +1,14 @@
 // This is an example of how to read a JSON Web Token from an API route
 import { getToken } from "next-auth/jwt"
+
 import type { NextApiRequest, NextApiResponse } from "next"
 
 const secret = process.env.NEXTAUTH_SECRET
 
-export default async (req: NextApiRequest, res: NextApiResponse) => {
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
   const token = await getToken({ req, secret })
   res.send(JSON.stringify(token, null, 2))
 }

apps/example-nextjs/pages/api/examples/protected.ts

@@ -1,19 +1,23 @@
 // This is an example of to protect an API route
 import { unstable_getServerSession } from "next-auth/next"
+import { authOptions } from "../auth/[...nextauth]"
+
 import type { NextApiRequest, NextApiResponse } from "next"
 
-export default async (req: NextApiRequest, res: NextApiResponse) => {
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
   const session = await unstable_getServerSession(req, res, authOptions)
 
   if (session) {
-    res.send({
+    return res.send({
       content:
         "This is protected content. You can access this content because you are signed in.",
     })
-  } else {
-    res.send({
-      error:
-        "You must be signed in to view the protected content on this page.",
-    })
   }
+
+  res.send({
+    error: "You must be signed in to view the protected content on this page.",
+  })
 }

apps/example-nextjs/pages/api/examples/session.ts

@@ -1,8 +1,13 @@
 // This is an example of how to access a session from an API route
-import { getSession } from "next-auth/react"
+import { unstable_getServerSession } from "next-auth"
+import { authOptions } from "../auth/[...nextauth]"
+
 import type { NextApiRequest, NextApiResponse } from "next"
 
-export default async (req: NextApiRequest, res: NextApiResponse) => {
-  const session = await getSession({ req })
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const session = await unstable_getServerSession(req, res, authOptions)
   res.send(JSON.stringify(session, null, 2))
 }

apps/example-nextjs/pages/server.tsx

@@ -1,12 +1,13 @@
 import { unstable_getServerSession } from "next-auth/next"
 import { authOptions } from "./api/auth/[...nextauth]"
 import Layout from "../components/layout"
-import type { NextPageContext } from "next"
 
-export default function ServerSidePage({ session }) {
+import type { GetServerSidePropsContext } from "next"
+import type { Session } from "next-auth"
+
+export default function ServerSidePage({ session }: { session: Session }) {
   // As this page uses Server Side Rendering, the `session` will be already
   // populated on render without needing to go through a loading stage.
-
   return (
     <Layout>
       <h1>Server Side Rendering</h1>
@@ -28,15 +29,20 @@ export default function ServerSidePage({ session }) {
         The disadvantage of Server Side Rendering is that this page is slower to
         render.
       </p>
+      <pre>{JSON.stringify(session, null, 2)}</pre>
     </Layout>
   )
 }
 
 // Export the `session` prop to use sessions with Server Side Rendering
-export async function getServerSideProps(context: NextPageContext) {
+export async function getServerSideProps(context: GetServerSidePropsContext) {
   return {
     props: {
-      session: await unstable_getServerSession(context.req, context.res, authOptions),
+      session: await unstable_getServerSession(
+        context.req,
+        context.res,
+        authOptions
+      ),
     },
   }
 }

packages/next-auth/package.json

@@ -107,8 +107,8 @@
     "@types/node": "^17.0.42",
     "@types/nodemailer": "^6.4.4",
     "@types/oauth": "^0.9.1",
-    "@types/react": "^18.0.2",
-    "@types/react-dom": "^18.0.5",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "autoprefixer": "^10.4.7",
     "babel-plugin-jsx-pragmatic": "^1.0.2",
     "babel-preset-preact": "^2.0.0",
@@ -117,7 +117,7 @@
     "jest-environment-jsdom": "^28.1.1",
     "jest-watch-typeahead": "^1.1.0",
     "msw": "^0.42.3",
-    "next": "12.1.7-canary.51",
+    "next": "12.2.0",
     "postcss": "^8.4.14",
     "postcss-cli": "^9.1.0",
     "postcss-nested": "^5.0.6",