Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Treat .mdx as .md file for now #4416

Merged
merged 2 commits into from
Mar 1, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions lib/linguist/languages.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2872,6 +2872,7 @@ Markdown:
- ".markdown"
- ".mdown"
- ".mdwn"
- ".mdx"
- ".mkd"
- ".mkdn"
- ".mkdown"
Expand Down
121 changes: 121 additions & 0 deletions samples/Markdown/sample.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
import Doc from '~/components/layout/docs'
import { Code, InlineCode } from '~/components/text/code'
import { TerminalInput } from '~/components/text/terminal'
import { GenericLink } from '~/components/text/link'
import Note from '~/components/text/note'
import Example from '~/components/example'
import Tag from '~/components/text/tag'

export const meta = {
title: 'Next.js Builder (@now/next)',
description:
'The official Next.js Builder for ZEIT Now. Deploy Next.js applications with ease.'
}

<Tag>Status: Stable</Tag>

The Now Next.js Builder takes a [Next.js application](https://nextjs.org), defined by a `next.config.js` entrypoint and `pages` directory, and converts those pages into a series of individual [lambdas](/docs/v2/deployments/concepts/lambdas).

It features built-in caching of `node_modules` and all compiler artifacts for very fast deployments.

## When to use it

`@now/next` is the ideal way to ship a fast, production-ready [Next.js application](https://nextjs.org) that scales automatically.

For more information on why you should use Next.js for your project, see [the Next.js website](https://nextjs.org).

## How to use it

The first step is to set up a Next.js project. If you have not yet done so; [the best place to get started is the Next.js documentation](https://nextjs.org/docs/#setup).

To get started, make sure you have installed the Next.js dependencies with the following command:

<TerminalInput>yarn add next react react-dom</TerminalInput>

Then, in your project directory, create a `pages` directory with some example pages, for example; the home index page, `pages/index.js`:

```jsx
export default () => <div>Hello world!</div>
```

Create a simple `next.config.js` file to use as our entrypoint for the build, and to configure that the build should be a collection of serverless [lambdas](/docs/v2/deployments/concepts/lambdas/):

```js
module.exports = {
target: 'serverless'
}
```

<Note>
The serverless method is only supported in{' '}
<GenericLink href="https://nextjs.org/blog/next-8/#serverless-nextjs">
Next.js version 8
</GenericLink>{' '}
and above.
</Note>

Then define a build step in a `now.json` configuration file:

```json
{
"version": 2,
"builds": [{ "src": "next.config.js", "use": "@now/next" }]
}
```

Upon deployment, you will get a URL like this: https://nextjs-8fnzfb1ci.now.sh

## Technical Details

### Entrypoint

The entrypoint of this builder is a `next.config.js` file with the `target` configuration option set to `serverless`.

```
module.exports = {
target: "serverless"
}
```

This configuration, shown above, tells Next.js to build each page in the `pages` directory as a [lambda](/docs/v2/deployments/concepts/lambdas/) function.

For more information on this, see [the Next.js documentation](https://github.com/zeit/next.js#serverless-deployment).

### Dependencies installation

The installation algorithm of dependencies works as follows:

- If a `package-lock.json` is present, `npm install` is used
- Otherwise, `yarn` is used.

### Private npm modules

To install private npm modules, define `NPM_TOKEN` as a [build environment](/docs/v2/deployments/configuration#build.env) in `now.json`.

### Node.js version

The Node.js version used is the latest in the **8 branch**.

### Custom Server

This builder seperates your pages into individual serverless endpoints, so you cannot use a custom server.

Using a custom server would require that all pages be routed through that custom server and the application would lose out on many of the benefits of [serverless](/docs/v2/deployments/concepts/lambdas/) Next.js. You can still achieve most of the logic that you have in a custom server by using [getInitialProps()](https://nextjs.org/docs/#fetching-data-and-component-lifecycle) and using [routes](/docs/v2/deployments/configuration/#routes).

### Maximum Lambda Bundle Size

To help keep cold boot times low, the [maximum output bundle size](/docs/v2/deployments/concepts/lambdas#maximum-bundle-size) for a Next.js output lambda is, by default, **`5mb`**.
This [limit is extendable](/docs/v2/deployments/builders/overview#configuring-output-lambda-size) up to **`50mb`**.

<Example>
<span>
Example <InlineCode>maxLambdaSize</InlineCode> configuration:
</span>
<Code lang="json">{`{
"builds": [
{ "src": "next.config.js", "use": "@now/next", "config": { "maxLambdaSize": "10mb" } }
]
}`}</Code>
</Example>

export default ({ children }) => <Doc meta={meta}>{children}</Doc>