Initial commit from Create Next App

sluucke · Dec 8, 2021 · 53dacd2 · 53dacd2
commit 53dacd2
Show file tree

Hide file tree

Showing 17 changed files with 2,206 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
diff --git a/README.md b/README.md
@@ -0,0 +1,47 @@
+# TypeScript Next.js example
+
+This is a really simple project that shows the usage of Next.js with TypeScript.
+
+## Preview
+
+Preview the example live on [StackBlitz](http://stackblitz.com/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-typescript)
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-typescript&project-name=with-typescript&repository-name=with-typescript)
+
+## How to use it?
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-typescript with-typescript-app
+# or
+yarn create next-app --example with-typescript with-typescript-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+
+## Notes
+
+This example shows how to integrate the TypeScript type system into Next.js. Since TypeScript is supported out of the box with Next.js, all we have to do is to install TypeScript.
+
+```
+npm install --save-dev typescript
+```
+
+To enable TypeScript's features, we install the type declarations for React and Node.
+
+```
+npm install --save-dev @types/react @types/react-dom @types/node
+```
+
+When we run `next dev` the next time, Next.js will start looking for any `.ts` or `.tsx` files in our project and builds it. It even automatically creates a `tsconfig.json` file for our project with the recommended settings.
+
+Next.js has built-in TypeScript declarations, so we'll get autocompletion for Next.js' modules straight away.
+
+A `type-check` script is also added to `package.json`, which runs TypeScript's `tsc` CLI in `noEmit` mode to run type-checking separately. You can then include this, for example, in your `test` scripts.
diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -0,0 +1,41 @@
+import React, { ReactNode } from 'react'
+import Link from 'next/link'
+import Head from 'next/head'
+
+type Props = {
+  children?: ReactNode
+  title?: string
+}
+
+const Layout = ({ children, title = 'This is the default title' }: Props) => (
+  <div>
+    <Head>
+      <title>{title}</title>
+      <meta charSet="utf-8" />
+      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+    </Head>
+    <header>
+      <nav>
+        <Link href="/">
+          <a>Home</a>
+        </Link>{' '}
+        |{' '}
+        <Link href="/about">
+          <a>About</a>
+        </Link>{' '}
+        |{' '}
+        <Link href="/users">
+          <a>Users List</a>
+        </Link>{' '}
+        | <a href="/api/users">Users API</a>
+      </nav>
+    </header>
+    {children}
+    <footer>
+      <hr />
+      <span>I'm here to stay (Footer)</span>
+    </footer>
+  </div>
+)
+
+export default Layout
diff --git a/components/List.tsx b/components/List.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react'
+import ListItem from './ListItem'
+import { User } from '../interfaces'
+
+type Props = {
+  items: User[]
+}
+
+const List = ({ items }: Props) => (
+  <ul>
+    {items.map((item) => (
+      <li key={item.id}>
+        <ListItem data={item} />
+      </li>
+    ))}
+  </ul>
+)
+
+export default List
diff --git a/components/ListDetail.tsx b/components/ListDetail.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+import { User } from '../interfaces'
+
+type ListDetailProps = {
+  item: User
+}
+
+const ListDetail = ({ item: user }: ListDetailProps) => (
+  <div>
+    <h1>Detail for {user.name}</h1>
+    <p>ID: {user.id}</p>
+  </div>
+)
+
+export default ListDetail
diff --git a/components/ListItem.tsx b/components/ListItem.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import Link from 'next/link'
+
+import { User } from '../interfaces'
+
+type Props = {
+  data: User
+}
+
+const ListItem = ({ data }: Props) => (
+  <Link href="/users/[id]" as={`/users/${data.id}`}>
+    <a>
+      {data.id}: {data.name}
+    </a>
+  </Link>
+)
+
+export default ListItem
diff --git a/interfaces/index.ts b/interfaces/index.ts
@@ -0,0 +1,10 @@
+// You can include shared interfaces/types in a separate file
+// and then use them in any component by importing them. For
+// example, to import the interface below do:
+//
+// import { User } from 'path/to/interfaces';
+
+export type User = {
+  id: number
+  name: string
+}
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/package.json b/package.json
@@ -0,0 +1,20 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start",
+    "type-check": "tsc"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@types/node": "^12.12.21",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.1",
+    "typescript": "4.0"
+  }
+}
diff --git a/pages/about.tsx b/pages/about.tsx
@@ -0,0 +1,16 @@
+import Link from 'next/link'
+import Layout from '../components/Layout'
+
+const AboutPage = () => (
+  <Layout title="About | Next.js + TypeScript Example">
+    <h1>About</h1>
+    <p>This is the about page</p>
+    <p>
+      <Link href="/">
+        <a>Go home</a>
+      </Link>
+    </p>
+  </Layout>
+)
+
+export default AboutPage
diff --git a/pages/api/users/index.ts b/pages/api/users/index.ts
@@ -0,0 +1,16 @@
+import { NextApiRequest, NextApiResponse } from 'next'
+import { sampleUserData } from '../../../utils/sample-data'
+
+const handler = (_req: NextApiRequest, res: NextApiResponse) => {
+  try {
+    if (!Array.isArray(sampleUserData)) {
+      throw new Error('Cannot find user data')
+    }
+
+    res.status(200).json(sampleUserData)
+  } catch (err) {
+    res.status(500).json({ statusCode: 500, message: err.message })
+  }
+}
+
+export default handler
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -0,0 +1,15 @@
+import Link from 'next/link'
+import Layout from '../components/Layout'
+
+const IndexPage = () => (
+  <Layout title="Home | Next.js + TypeScript Example">
+    <h1>Hello Next.js 👋</h1>
+    <p>
+      <Link href="/about">
+        <a>About</a>
+      </Link>
+    </p>
+  </Layout>
+)
+
+export default IndexPage
diff --git a/pages/users/[id].tsx b/pages/users/[id].tsx
@@ -0,0 +1,61 @@
+import { GetStaticProps, GetStaticPaths } from 'next'
+
+import { User } from '../../interfaces'
+import { sampleUserData } from '../../utils/sample-data'
+import Layout from '../../components/Layout'
+import ListDetail from '../../components/ListDetail'
+
+type Props = {
+  item?: User
+  errors?: string
+}
+
+const StaticPropsDetail = ({ item, errors }: Props) => {
+  if (errors) {
+    return (
+      <Layout title="Error | Next.js + TypeScript Example">
+        <p>
+          <span style={{ color: 'red' }}>Error:</span> {errors}
+        </p>
+      </Layout>
+    )
+  }
+
+  return (
+    <Layout
+      title={`${
+        item ? item.name : 'User Detail'
+      } | Next.js + TypeScript Example`}
+    >
+      {item && <ListDetail item={item} />}
+    </Layout>
+  )
+}
+
+export default StaticPropsDetail
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  // Get the paths we want to pre-render based on users
+  const paths = sampleUserData.map((user) => ({
+    params: { id: user.id.toString() },
+  }))
+
+  // We'll pre-render only these paths at build time.
+  // { fallback: false } means other routes should 404.
+  return { paths, fallback: false }
+}
+
+// This function gets called at build time on server-side.
+// It won't be called on client-side, so you can even do
+// direct database queries.
+export const getStaticProps: GetStaticProps = async ({ params }) => {
+  try {
+    const id = params?.id
+    const item = sampleUserData.find((data) => data.id === Number(id))
+    // By returning { props: item }, the StaticPropsDetail component
+    // will receive `item` as a prop at build time
+    return { props: { item } }
+  } catch (err) {
+    return { props: { errors: err.message } }
+  }
+}
diff --git a/pages/users/index.tsx b/pages/users/index.tsx
@@ -0,0 +1,37 @@
+import { GetStaticProps } from 'next'
+import Link from 'next/link'
+
+import { User } from '../../interfaces'
+import { sampleUserData } from '../../utils/sample-data'
+import Layout from '../../components/Layout'
+import List from '../../components/List'
+
+type Props = {
+  items: User[]
+}
+
+const WithStaticProps = ({ items }: Props) => (
+  <Layout title="Users List | Next.js + TypeScript Example">
+    <h1>Users List</h1>
+    <p>
+      Example fetching data from inside <code>getStaticProps()</code>.
+    </p>
+    <p>You are currently on: /users</p>
+    <List items={items} />
+    <p>
+      <Link href="/">
+        <a>Go home</a>
+      </Link>
+    </p>
+  </Layout>
+)
+
+export const getStaticProps: GetStaticProps = async () => {
+  // Example for including static props in a Next.js function component page.
+  // Don't forget to include the respective types for any props passed into
+  // the component.
+  const items: User[] = sampleUserData
+  return { props: { items } }
+}
+
+export default WithStaticProps
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/utils/sample-data.ts b/utils/sample-data.ts
@@ -0,0 +1,9 @@
+import { User } from '../interfaces'
+
+/** Dummy user data. */
+export const sampleUserData: User[] = [
+  { id: 101, name: 'Alice' },
+  { id: 102, name: 'Bob' },
+  { id: 103, name: 'Caroline' },
+  { id: 104, name: 'Dave' },
+]