Merge pull request #6 from ably-labs/nextjs-chat-app-netlify

netlify changes

Author: carolcarriazo

.env.example

@@ -0,0 +1 @@
+ABLY_API_KEY=

.eslintrc.json

@@ -1,3 +1,26 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": [
+    "next/core-web-vitals",
+    "prettier",
+    "plugin:react/recommended"
+  ],
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/react-in-jsx-scope": "off",
+    "react/prop-types": "off"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 2021,
+    "sourceType": "module"
+  }
 }

.gitignore

@@ -29,3 +29,6 @@ yarn-error.log*
 .env.development.local
 .env.test.local
 .env.production.local
+
+# local Netlify folder
+.netlify

.tool-versions

@@ -0,0 +1 @@
+nodejs 20.10.0

README.md

@@ -1,4 +1,4 @@
-# Building a Realtime Chat App with Next.js, Ably, and Vercel
+# Building a Realtime Chat App with Next.js, Ably, and Netlify
 
 Live example at: <https://next-js-chat-app.vercel.app>
 
@@ -18,20 +18,22 @@ It demonstrates the use of:
 
 The project uses the following components:
 
-- [Next.js](https://nextjs.org/) is a React framework from [Vercel](https://vercel.com/). It is used to build static web applications with server side rendering, serverless functions and seamless hosting. It's a framework that takes the React knowledge you already have, and puts some structure and conventions in place.
+- [Next.js](https://nextjs.org/) is a React framework used to build static web applications with server side rendering, serverless functions and seamless hosting. It's a framework that takes the React knowledge you already have, and puts some structure and conventions in place.
 
 - [Ably](https://ably.com/) is realtime, pub/sub messaging platform with a suite of integrated services to deliver complete realtime functionality directly to end-users.
 
-- [Vercel](https://vercel.com/) is a hosting platform, built from the ground up to host Next.js apps, and Serverless Functions with them.
+- [Netlify](https://netlify.com/) is a hosting platform that provides continuous deployment, serverless functions, and a global CDN for modern web projects.
 
 - [React](https://reactjs.org/) is a JavaScript library for building user interfaces with encapsulated components that manage their own state.
 
+- [TypeScript](https://www.typescriptlang.org/) is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
+
 ## What are we going to build?
 
-![The UI of the chat app we'll build. It is a window with speech bubbles for text.](https://cdn.glitch.com/0cb30add-c9ef-4c00-983c-e12deb0d4080%2Fchatapp.png?v=1612279601157)  
-*The UI of the app we'll build with this walkthrough*  
+![The UI of the chat app we'll build. It is a window with speech bubbles for text.](https://cdn.glitch.com/0cb30add-c9ef-4c00-983c-e12deb0d4080%2Fchatapp.png?v=1612279601157)
+*The UI of the app we'll build with this walkthrough*
 
-We'll build a realtime chat app that runs in the browser. It will be built upon the Next.js [create-next-app](https://nextjs.org/docs/api-reference/create-next-app) template, it will contain a React component which will use Ably to send and receive messages. We'll also write a Next.js serverless function which will be used to connect to Ably.
+We'll build a realtime chat app that runs in the browser. It will be built upon the Next.js [create-next-app](https://nextjs.org/docs/api-reference/create-next-app) template, it will contain a React component which will use Ably to send and receive messages. We'll also write a serverless function which will be used to authenticate the client with Ably.
 
 ## Building & running locally
 
@@ -40,8 +42,8 @@ We'll build a realtime chat app that runs in the browser. It will be built upon
 In order to build and deploy this app, you will need:
 
 - **An Ably account** for sending messages: [Create an account with Ably for free](https://ably.com/signup).
-- **A Vercel Account** for hosting on production: [Create an account with Vercel for free](https://vercel.com/signup).
-- **Node 16** or greater: [Install Node](https://nodejs.org/en/).
+- **A Netlify Account** for hosting on production: [Create an account with Netlify for free](https://netlify.com/signup).
+- **Node 20** or greater: [Install Node](https://nodejs.org/en/).
 
 You'll also need an API key from Ably to authenticate with the Ably Service. To get an API key, once you have [created an Ably account](https://ably.com/signup):
 
@@ -58,24 +60,35 @@ ABLY_API_KEY=your-ably-api-key:goes-here
 ```
 
 2. Run `npm install`.
-3. Run `npm run dev`.
+3. Run `npm run netlify:dev` to start the Netlify development server.
+
+The Netlify development server will spin up and you'll see a demo chat application.
+
+> Note: You can also use `npm run dev` to run just the Next.js development server without Netlify functions, but for the full experience with serverless functions, use `npm run netlify:dev`.
+
+### TypeScript Support
+
+This project uses TypeScript for type safety. Here are some useful commands for TypeScript development:
+
+- `npm run type-check`: Run TypeScript's type checker without emitting files
+- `npm run dev`: The Next.js development server automatically type-checks your code as you develop
 
-The Next.js dev server will spin up and you'll see a demo chat application.
+When creating new components or functions, use the `.tsx` extension for React components and `.ts` for plain TypeScript files. The project is configured with a `tsconfig.json` file that provides sensible defaults for Next.js TypeScript projects.
 
-## Hosting on Vercel
+## Hosting on Netlify
 
-We're using `Vercel` as our development server and build pipeline.
+We're using `Netlify` as our development server and build pipeline.
 
-> The easiest way to deploy Next.js to production is to use the Vercel platform from the creators of Next.js. Vercel is an all-in-one platform with Global CDN supporting static & Jamstack deployment and Serverless Functions.
-<cite>-- [The Next.js documentation](https://nextjs.org/docs/deployment)</cive>
+> Netlify is a powerful platform for building, deploying, and managing modern web projects. It provides continuous deployment, serverless functions, and a global CDN.
+<cite>-- [The Netlify documentation](https://docs.netlify.com/)</cite>
 
-In order to deploy your new chat app to Vercel you'll need to:
+In order to deploy your new chat app to Netlify you'll need to:
 
 1. Create a [GitHub account](https://github.com/) (if you don't already have one)
 2. [Push your app to a GitHub repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-new-repository)
-3. [Create a Vercel account](https://vercel.com/signup)
-4. Create a new Vercel app and import your app from your GitHub repository. (This will require you to authorise Vercel to use your GitHub account)
-5. Add your `ABLY_API_KEY` as an environment variable
+3. [Create a Netlify account](https://netlify.com/signup)
+4. Create a new Netlify site and import your app from your GitHub repository. (This will require you to authorize Netlify to use your GitHub account)
+5. Add your `ABLY_API_KEY` as an environment variable in the Netlify site settings
 6. Watch your app deploy
 7. Visit the newly created URL in your browser!
 

app/api/route.js

@@ -0,0 +1,16 @@
+import './globals.css';
+import React from 'react';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}

app/favicon.ico

@@ -0,0 +1,168 @@
+.page {
+  --gray-rgb: 0, 0, 0;
+  --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
+  --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
+
+  --button-primary-hover: #383838;
+  --button-secondary-hover: #f2f2f2;
+
+  display: grid;
+  grid-template-rows: 20px 1fr 20px;
+  align-items: center;
+  justify-items: center;
+  min-height: 100svh;
+  padding: 80px;
+  gap: 64px;
+  font-family: var(--font-geist-sans);
+}
+
+@media (prefers-color-scheme: dark) {
+  .page {
+    --gray-rgb: 255, 255, 255;
+    --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
+    --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
+
+    --button-primary-hover: #ccc;
+    --button-secondary-hover: #1a1a1a;
+  }
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  grid-row-start: 2;
+}
+
+.main ol {
+  font-family: var(--font-geist-mono);
+  padding-left: 0;
+  margin: 0;
+  font-size: 14px;
+  line-height: 24px;
+  letter-spacing: -0.01em;
+  list-style-position: inside;
+}
+
+.main li:not(:last-of-type) {
+  margin-bottom: 8px;
+}
+
+.main code {
+  font-family: inherit;
+  background: var(--gray-alpha-100);
+  padding: 2px 4px;
+  border-radius: 4px;
+  font-weight: 600;
+}
+
+.ctas {
+  display: flex;
+  gap: 16px;
+}
+
+.ctas a {
+  appearance: none;
+  border-radius: 128px;
+  height: 48px;
+  padding: 0 20px;
+  border: none;
+  border: 1px solid transparent;
+  transition:
+    background 0.2s,
+    color 0.2s,
+    border-color 0.2s;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 500;
+}
+
+a.primary {
+  background: var(--foreground);
+  color: var(--background);
+  gap: 8px;
+}
+
+a.secondary {
+  border-color: var(--gray-alpha-200);
+  min-width: 158px;
+}
+
+.footer {
+  grid-row-start: 3;
+  display: flex;
+  gap: 24px;
+}
+
+.footer a {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.footer img {
+  flex-shrink: 0;
+}
+
+/* Enable hover only on non-touch devices */
+@media (hover: hover) and (pointer: fine) {
+  a.primary:hover {
+    background: var(--button-primary-hover);
+    border-color: transparent;
+  }
+
+  a.secondary:hover {
+    background: var(--button-secondary-hover);
+    border-color: transparent;
+  }
+
+  .footer a:hover {
+    text-decoration: underline;
+    text-underline-offset: 4px;
+  }
+}
+
+@media (max-width: 600px) {
+  .page {
+    padding: 32px;
+    padding-bottom: 80px;
+  }
+
+  .main {
+    align-items: center;
+  }
+
+  .main ol {
+    text-align: center;
+  }
+
+  .ctas {
+    flex-direction: column;
+  }
+
+  .ctas a {
+    font-size: 14px;
+    height: 40px;
+    padding: 0 16px;
+  }
+
+  a.secondary {
+    min-width: auto;
+  }
+
+  .footer {
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .logo {
+    filter: invert();
+  }
+}