Skip to content

Commit b7a4d1f

Browse files
kamilogorekkamilogorek
committed
Example app using create-next-app and Sentry docs
1 parent b098076 commit b7a4d1f

29 files changed

+3000
-0
lines changed

‎packages/nextjs/test/integration/.gitignore‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
27+
# local env files
28+
.env.local
29+
.env.development.local
30+
.env.test.local
31+
.env.production.local
32+
33+
# vercel
34+
.vercel

‎packages/nextjs/test/integration/README.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# TypeScript Next.js example
2+
3+
This is a really simple project that shows the usage of Next.js with TypeScript.
4+
5+
## Deploy your own
6+
7+
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
8+
9+
[![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)
10+
11+
## How to use it?
12+
13+
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with
14+
[npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
15+
16+
```bash
17+
npx create-next-app --example with-typescript with-typescript-app
18+
# or
19+
yarn create next-app --example with-typescript with-typescript-app
20+
```
21+
22+
Deploy it to the cloud with
23+
[Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example)
24+
([Documentation](https://nextjs.org/docs/deployment)).
25+
26+
## Notes
27+
28+
This example shows how to integrate the TypeScript type system into Next.js. Since TypeScript is supported out of the
29+
box with Next.js, all we have to do is to install TypeScript.
30+
31+
```
32+
npm install --save-dev typescript
33+
```
34+
35+
To enable TypeScript's features, we install the type declarations for React and Node.
36+
37+
```
38+
npm install --save-dev @types/react @types/react-dom @types/node
39+
```
40+
41+
When we run `next dev` the next time, Next.js will start looking for any `.ts` or `.tsx` files in our project and builds
42+
it. It even automatically creates a `tsconfig.json` file for our project with the recommended settings.
43+
44+
Next.js has built-in TypeScript declarations, so we'll get autocompletion for Next.js' modules straight away.
45+
46+
A `type-check` script is also added to `package.json`, which runs TypeScript's `tsc` CLI in `noEmit` mode to run
47+
type-checking separately. You can then include this, for example, in your `test` scripts.

‎packages/nextjs/test/integration/components/Layout.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React, { ReactNode } from 'react';
2+
import Link from 'next/link';
3+
import Head from 'next/head';
4+
5+
type Props = {
6+
children?: ReactNode;
7+
title?: string;
8+
};
9+
10+
const Layout = ({ children, title = 'This is the default title' }: Props) => (
11+
<div>
12+
<Head>
13+
<title>{title}</title>
14+
<meta charSet="utf-8" />
15+
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
16+
</Head>
17+
<header>
18+
<nav>
19+
<Link href="/">
20+
<a>Home</a>
21+
</Link>{' '}
22+
|{' '}
23+
<Link href="/about">
24+
<a>About</a>
25+
</Link>{' '}
26+
|{' '}
27+
<Link href="/users">
28+
<a>Users List</a>
29+
</Link>{' '}
30+
| <a href="/api/users">Users API</a>
31+
</nav>
32+
</header>
33+
{children}
34+
<footer>
35+
<hr />
36+
<span>I'm here to stay (Footer)</span>
37+
</footer>
38+
</div>
39+
);
40+
41+
export default Layout;

‎packages/nextjs/test/integration/components/List.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import * as React from 'react';
2+
import ListItem from './ListItem';
3+
import { User } from '../interfaces';
4+
5+
type Props = {
6+
items: User[];
7+
};
8+
9+
const List = ({ items }: Props) => (
10+
<ul>
11+
{items.map(item => (
12+
<li key={item.id}>
13+
<ListItem data={item} />
14+
</li>
15+
))}
16+
</ul>
17+
);
18+
19+
export default List;

‎packages/nextjs/test/integration/components/ListDetail.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import * as React from 'react';
2+
3+
import { User } from '../interfaces';
4+
5+
type ListDetailProps = {
6+
item: User;
7+
};
8+
9+
const ListDetail = ({ item: user }: ListDetailProps) => (
10+
<div>
11+
<h1>Detail for {user.name}</h1>
12+
<p>ID: {user.id}</p>
13+
</div>
14+
);
15+
16+
export default ListDetail;

‎packages/nextjs/test/integration/components/ListItem.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react';
2+
import Link from 'next/link';
3+
4+
import { User } from '../interfaces';
5+
6+
type Props = {
7+
data: User;
8+
};
9+
10+
const ListItem = ({ data }: Props) => (
11+
<Link href="/users/[id]" as={`/users/${data.id}`}>
12+
<a>
13+
{data.id}: {data.name}
14+
</a>
15+
</Link>
16+
);
17+
18+
export default ListItem;

‎packages/nextjs/test/integration/interfaces/index.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// You can include shared interfaces/types in a separate file
2+
// and then use them in any component by importing them. For
3+
// example, to import the interface below do:
4+
//
5+
// import { User } from 'path/to/interfaces';
6+
7+
export type User = {
8+
id: number;
9+
name: string;
10+
};

‎packages/nextjs/test/integration/next-env.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/// <reference types="next" />
2+
/// <reference types="next/types/global" />

‎packages/nextjs/test/integration/next.config.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const { withSentryConfig } = require('@sentry/nextjs');
2+
3+
const moduleExports = {};
4+
const SentryWebpackPluginOptions = {
5+
dryRun: true,
6+
silent: true,
7+
};
8+
9+
module.exports = withSentryConfig(moduleExports, SentryWebpackPluginOptions);

‎packages/nextjs/test/integration/package.json‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "with-typescript",
3+
"version": "1.0.0",
4+
"scripts": {
5+
"dev": "next",
6+
"build": "next build",
7+
"start": "next start",
8+
"type-check": "tsc"
9+
},
10+
"dependencies": {
11+
"@sentry/nextjs": "file:../../",
12+
"next": "latest",
13+
"react": "^17.0.1",
14+
"react-dom": "^17.0.1"
15+
},
16+
"devDependencies": {
17+
"@types/node": "^15.3.1",
18+
"@types/puppeteer": "^5.4.3",
19+
"@types/react": "^17.0.6",
20+
"@types/react-dom": "^17.0.5",
21+
"nock": "^13.1.0",
22+
"puppeteer": "^9.1.1",
23+
"typescript": "^4.2.4"
24+
},
25+
"license": "MIT"
26+
}

0 commit comments

Comments
 (0)