diff --git a/examples/with-mongodb/.env.local.example b/examples/with-mongodb/.env.local.example index 9dead415dc211..18ea9c3cc8c6a 100644 --- a/examples/with-mongodb/.env.local.example +++ b/examples/with-mongodb/.env.local.example @@ -1 +1 @@ -MONGODB_URI= \ No newline at end of file +MONGODB_URI="YOUR_MONGODB_CONNECTION_STRING" \ No newline at end of file diff --git a/examples/with-mongodb/app/actions.ts b/examples/with-mongodb/app/actions.ts new file mode 100644 index 0000000000000..c4c4c028f5521 --- /dev/null +++ b/examples/with-mongodb/app/actions.ts @@ -0,0 +1,19 @@ +"use server"; + +import client from "@/lib/mongodb"; + +export async function testDatabaseConnection() { + let isConnected = false; + try { + const mongoClient = await client.connect(); + // Send a ping to confirm a successful connection + await mongoClient.db("admin").command({ ping: 1 }); + console.log( + "Pinged your deployment. You successfully connected to MongoDB!", + ); // because this is a server action, the console.log will be outputted to your terminal not in the browser + return !isConnected; + } catch (e) { + console.error(e); + return isConnected; + } +} diff --git a/examples/with-mongodb/app/app-demo/page.tsx b/examples/with-mongodb/app/app-demo/page.tsx new file mode 100644 index 0000000000000..bff92188d516e --- /dev/null +++ b/examples/with-mongodb/app/app-demo/page.tsx @@ -0,0 +1,148 @@ +import Image from "next/image"; +import { testDatabaseConnection } from "../actions"; +import Link from "next/link"; + +export default async function Home() { + const isConnected = await testDatabaseConnection(); + + return ( +
+
+

+ App Router: Get started by editing  + app/app-demo/page.tsx +

+
+ + By{" "} + Vercel Logo + +
+
+ +
+
+ Next.js Logo + {" + "} + MongoDB Logo +
+ {isConnected ? ( +

+ You are connected to MongoDB! +

+ ) : ( +

+ You are NOT connected to MongoDB. Check the README.md{" "} + for instructions. +

+ )} +

+ This page uses the App Router. Check out the + Pages Router version here:  + + pages/index.tsx + +

+
+ +
+ +

+ Docs{" "} + + -> + +

+

+ Find in-depth information about Next.js features and API. +

+ + + +

+ Learn{" "} + + -> + +

+

+ Learn about Next.js in an interactive course with quizzes! +

+ + + +

+ Templates{" "} + + -> + +

+

+ Explore starter templates for Next.js + MongoDB. +

+ + + +

+ Deploy{" "} + + -> + +

+

+ Instantly deploy your Next.js site to a shareable URL with Vercel. +

+ +
+
+ ); +} diff --git a/examples/with-mongodb/app/favicon.ico b/examples/with-mongodb/app/favicon.ico new file mode 100644 index 0000000000000..718d6fea4835e Binary files /dev/null and b/examples/with-mongodb/app/favicon.ico differ diff --git a/examples/with-mongodb/app/layout.tsx b/examples/with-mongodb/app/layout.tsx new file mode 100644 index 0000000000000..8051173c02150 --- /dev/null +++ b/examples/with-mongodb/app/layout.tsx @@ -0,0 +1,22 @@ +import type { Metadata } from "next"; +import { Inter } from "next/font/google"; +import "@/styles/globals.css"; + +const inter = Inter({ subsets: ["latin"] }); + +export const metadata: Metadata = { + title: "Create Next App", + description: "Generated by create next app", +}; + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + {children} + + ); +} diff --git a/examples/with-mongodb/lib/mongodb.ts b/examples/with-mongodb/lib/mongodb.ts index 3b722a12863c9..207ac36e7e985 100644 --- a/examples/with-mongodb/lib/mongodb.ts +++ b/examples/with-mongodb/lib/mongodb.ts @@ -1,17 +1,11 @@ -import { MongoClient, ServerApiVersion } from "mongodb"; +import { MongoClient } from "mongodb"; if (!process.env.MONGODB_URI) { throw new Error('Invalid/Missing environment variable: "MONGODB_URI"'); } const uri = process.env.MONGODB_URI; -const options = { - serverApi: { - version: ServerApiVersion.v1, - strict: true, - deprecationErrors: true, - }, -}; +const options = { appName: "devrel.template.nextjs" }; let client: MongoClient; @@ -33,4 +27,5 @@ if (process.env.NODE_ENV === "development") { // Export a module-scoped MongoClient. By doing this in a // separate module, the client can be shared across functions. + export default client; diff --git a/examples/with-mongodb/next.config.js b/examples/with-mongodb/next.config.js new file mode 100644 index 0000000000000..658404ac690c0 --- /dev/null +++ b/examples/with-mongodb/next.config.js @@ -0,0 +1,4 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = {}; + +module.exports = nextConfig; diff --git a/examples/with-mongodb/package.json b/examples/with-mongodb/package.json index f81c0c69f3453..db813e3dfb02b 100644 --- a/examples/with-mongodb/package.json +++ b/examples/with-mongodb/package.json @@ -8,12 +8,18 @@ "dependencies": { "mongodb": "^6.5.0", "next": "latest", - "react": "^18.2.0", - "react-dom": "^18.2.0" + "react": "^18", + "react-dom": "^18" }, "devDependencies": { - "@types/node": "18.7.5", - "@types/react": "16.9.17", - "typescript": "4.6.3" + "@types/node": "^20", + "@types/react": "^18", + "@types/react-dom": "^18", + "autoprefixer": "^10.0.1", + "eslint": "^8", + "eslint-config-next": "14.0.4", + "postcss": "^8", + "tailwindcss": "^3.3.0", + "typescript": "^5" } } diff --git a/examples/with-mongodb/pages/_app.tsx b/examples/with-mongodb/pages/_app.tsx new file mode 100644 index 0000000000000..a7a790fba51fa --- /dev/null +++ b/examples/with-mongodb/pages/_app.tsx @@ -0,0 +1,6 @@ +import "@/styles/globals.css"; +import type { AppProps } from "next/app"; + +export default function App({ Component, pageProps }: AppProps) { + return ; +} diff --git a/examples/with-mongodb/pages/_document.tsx b/examples/with-mongodb/pages/_document.tsx new file mode 100644 index 0000000000000..b2fff8b4262dd --- /dev/null +++ b/examples/with-mongodb/pages/_document.tsx @@ -0,0 +1,13 @@ +import { Html, Head, Main, NextScript } from "next/document"; + +export default function Document() { + return ( + + + +
+ + + + ); +} diff --git a/examples/with-mongodb/pages/index.tsx b/examples/with-mongodb/pages/index.tsx index d1730715e16d2..5cf13004cc69a 100644 --- a/examples/with-mongodb/pages/index.tsx +++ b/examples/with-mongodb/pages/index.tsx @@ -1,11 +1,15 @@ -import Head from "next/head"; -import client from "../lib/mongodb"; +import Image from "next/image"; +import Link from "next/link"; +import { Inter } from "next/font/google"; +import client from "@/lib/mongodb"; import type { InferGetServerSidePropsType, GetServerSideProps } from "next"; type ConnectionStatus = { isConnected: boolean; }; +const inter = Inter({ subsets: ["latin"] }); + export const getServerSideProps: GetServerSideProps< ConnectionStatus > = async () => { @@ -26,241 +30,145 @@ export default function Home({ isConnected, }: InferGetServerSidePropsType) { return ( -
- - Create Next App - - - -
-

- Welcome to Next.js with MongoDB! -

- - {isConnected ? ( -

You are connected to MongoDB

- ) : ( -

- You are NOT connected to MongoDB. Check the README.md{" "} - for instructions. -

- )} - -

- Get started by editing pages/index.js +

+
+
+ +
+
+ Next.js Logo + {" + "} + MongoDB Logo +
+ {isConnected ? ( +

+ You are connected to MongoDB! +

+ ) : ( +

+ You are NOT connected to MongoDB. Check the README.md{" "} + for instructions. +

+ )} +

+ This page uses the Pages Router. Check out the + App Router version here:  + + app/app-demo/page.tsx + +

+
- - - + +

+ Learn{" "} + + -> + +

+

+ Learn about Next.js in an interactive course with quizzes! +

+ - - + +

+ Deploy{" "} + + -> + +

+

+ Instantly deploy your Next.js site to a shareable URL with Vercel. +

+ + +
); } diff --git a/examples/with-mongodb/postcss.config.js b/examples/with-mongodb/postcss.config.js new file mode 100644 index 0000000000000..12a703d900da8 --- /dev/null +++ b/examples/with-mongodb/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/examples/with-mongodb/public/favicon.ico b/examples/with-mongodb/public/favicon.ico deleted file mode 100644 index 4965832f2c9b0..0000000000000 Binary files a/examples/with-mongodb/public/favicon.ico and /dev/null differ diff --git a/examples/with-mongodb/public/mongodb.svg b/examples/with-mongodb/public/mongodb.svg new file mode 100644 index 0000000000000..45cddffb9c43f --- /dev/null +++ b/examples/with-mongodb/public/mongodb.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/examples/with-mongodb/public/next.svg b/examples/with-mongodb/public/next.svg new file mode 100644 index 0000000000000..5174b28c565c2 --- /dev/null +++ b/examples/with-mongodb/public/next.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/with-mongodb/public/vercel.svg b/examples/with-mongodb/public/vercel.svg index fbf0e25a651c2..d2f84222734f2 100644 --- a/examples/with-mongodb/public/vercel.svg +++ b/examples/with-mongodb/public/vercel.svg @@ -1,4 +1 @@ - - - \ No newline at end of file + \ No newline at end of file diff --git a/examples/with-mongodb/styles/globals.css b/examples/with-mongodb/styles/globals.css new file mode 100644 index 0000000000000..fd81e885836d8 --- /dev/null +++ b/examples/with-mongodb/styles/globals.css @@ -0,0 +1,27 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +:root { + --foreground-rgb: 0, 0, 0; + --background-start-rgb: 214, 219, 220; + --background-end-rgb: 255, 255, 255; +} + +@media (prefers-color-scheme: dark) { + :root { + --foreground-rgb: 255, 255, 255; + --background-start-rgb: 0, 0, 0; + --background-end-rgb: 0, 0, 0; + } +} + +body { + color: rgb(var(--foreground-rgb)); + background: linear-gradient( + to bottom, + transparent, + rgb(var(--background-end-rgb)) + ) + rgb(var(--background-start-rgb)); +} diff --git a/examples/with-mongodb/tailwind.config.ts b/examples/with-mongodb/tailwind.config.ts new file mode 100644 index 0000000000000..7e4bd91a03437 --- /dev/null +++ b/examples/with-mongodb/tailwind.config.ts @@ -0,0 +1,20 @@ +import type { Config } from "tailwindcss"; + +const config: Config = { + content: [ + "./pages/**/*.{js,ts,jsx,tsx,mdx}", + "./components/**/*.{js,ts,jsx,tsx,mdx}", + "./app/**/*.{js,ts,jsx,tsx,mdx}", + ], + theme: { + extend: { + backgroundImage: { + "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", + "gradient-conic": + "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", + }, + }, + }, + plugins: [], +}; +export default config; diff --git a/examples/with-mongodb/tsconfig.json b/examples/with-mongodb/tsconfig.json index 50bcb22f653d7..5083d2efce3e2 100644 --- a/examples/with-mongodb/tsconfig.json +++ b/examples/with-mongodb/tsconfig.json @@ -1,20 +1,28 @@ { "compilerOptions": { + "forceConsistentCasingInFileNames": true, "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, - "forceConsistentCasingInFileNames": true, "noEmit": true, - "incremental": true, "esModuleInterop": true, "module": "esnext", - "moduleResolution": "node", + "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, - "jsx": "preserve" + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "paths": { + "@/*": ["./*"] + } }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] }