OpenFood/openfood
1
0
Fork 0
Code Issues 1 Pull Requests 3 Projects Releases Wiki Activity

Initial commit from Create Next App

Browse Source
This commit is contained in:
Kasper Juul Hermansen 2021-10-12 21:17:12 +02:00
commit adc12fcae3
Signed by: kjuulh
GPG Key ID: DCD9397082D97069
17 changed files with 2364 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
.gitignore vendored Normal file
View File

@ -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

47
README.md Normal file
View File

@ -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.

41
components/Layout.tsx Normal file
View File

@ -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

19
components/List.tsx Normal file
View File

@ -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

16
components/ListDetail.tsx Normal file
View File

@ -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

18
components/ListItem.tsx Normal file
View File

@ -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

10
interfaces/index.ts Normal file
View File

@ -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
}

6
next-env.d.ts vendored Normal file
View File

@ -0,0 +1,6 @@
/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.

20
package.json Normal file
View File

@ -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"
}
}

16
pages/about.tsx Normal file
View File

@ -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

16
pages/api/users/index.ts Normal file
View File

@ -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

15
pages/index.tsx Normal file
View File

@ -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

61
pages/users/[id].tsx Normal file
View File

@ -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 } }
}
}

37
pages/users/index.tsx Normal file
View File

@ -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

19
tsconfig.json Normal file
View File

@ -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"]
}

9
utils/sample-data.ts Normal file
View File

@ -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' },
]

1980
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff