-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Treat .mdx as .md file for now (#4416)
* Treat .mdx as .md file for now MDX (.mdx) is an superset on top of CommonMark (Markdown) that supports JSX and JavaScript's imports/exports: - MDX: https://mdxjs.com/ - CommonMark: https://commonmark.org/ - JSX: https://facebook.github.io/jsx/ - export: https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export - import: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import I don't know what supporting the full syntax of MDX would look like for GitHub, but this will at least improve it somewhat * Add sample file for mdx
- Loading branch information
1 parent
cb8e0f8
commit 88a2ffa
Showing
2 changed files
with
122 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2872,6 +2872,7 @@ Markdown: | |
- ".markdown" | ||
- ".mdown" | ||
- ".mdwn" | ||
- ".mdx" | ||
- ".mkd" | ||
- ".mkdn" | ||
- ".mkdown" | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |