Movatterモバイル変換

JavaScriptExpert/next.jsPublic

forked fromvercel/next.js

NotificationsYou must be signed in to change notification settings
Fork0
Star2

A minimalistic framework for universal server-rendered React applications

zeit.co/blog/next

License

MIT license

2 stars 28.5k forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 1,629 Commits
.github		.github
bench		bench
bin		bin
client		client
examples		examples
lib		lib
pages		pages
server		server
test		test
.babelrc		.babelrc
.gitignore		.gitignore
.npmrc		.npmrc
.travis.yml		.travis.yml
appveyor.yml		appveyor.yml
babel.js		babel.js
client.js		client.js
contributing.md		contributing.md
css.js		css.js
document.js		document.js
dynamic.js		dynamic.js
error.js		error.js
head.js		head.js
license.md		license.md
link.js		link.js
package.json		package.json
prefetch.js		prefetch.js
readme.md		readme.md
router.js		router.js
taskfile.js		taskfile.js
wallaby.js		wallaby.js
yarn.lock		yarn.lock

Repository files navigation

Next.js is a minimalistic framework for server-rendered React applications.

Visitlearnnextjs.com to get started with Next.js.

How to use

Setup

Install it:

npm install --save next react react-dom

Next.js 4 only supportsReact 16.
We had to drop React 15 support due to the way React 16 works and how we use it.

and add a script to your package.json like this:

{"scripts": {"dev":"next","build":"next build","start":"next start"  }}

After that, the file-system is the main API. Every.js file becomes a route that gets automatically processed and rendered.

Populate./pages/index.js inside your project:

exportdefault()=><div>Welcome to next.js!</div>

and then just runnpm run dev and go tohttp://localhost:3000. To use another port, you can runnpm run dev -- -p <your port here>.

So far, we get:

Automatic transpilation and bundling (with webpack and babel)
Hot code reloading
Server rendering and indexing of./pages
Static file serving../static/ is mapped to/static/

To see how simple this is, check out thesample app - nextgram

Automatic code splitting

Everyimport you declare gets bundled and served with each page. That means pages never load unnecessary code!

importcowsayfrom'cowsay-browser'exportdefault()=><pre>{cowsay.say({text:'hi there!'})}</pre>

CSS

Built-in CSS support

Examples

Basic css

We bundlestyled-jsx to provide support for isolated scoped CSS. The aim is to support "shadow CSS" similar to Web Components, which unfortunatelydo not support server-rendering and are JS-only.

exportdefault()=><div>    Hello world<p>scoped!</p><stylejsx>{`      p {        color: blue;      }      div {        background: red;      }      @media (max-width: 600px) {        div {          background: blue;        }      }    `}</style><styleglobaljsx>{`      body {        background: black;      }    `}</style></div>

Please see thestyled-jsx documentation for more examples.

CSS-in-JS

Examples

It's possible to use any existing CSS-in-JS solution. The simplest one is inline styles:

exportdefault()=><pstyle={{color:'red'}}>hi there</p>

To use more sophisticated CSS-in-JS solutions, you typically have to implement style flushing for server-side rendering. We enable this by allowing you to define your owncustom<Document> component that wraps each page

Static file serving (e.g.: images)

Create a folder calledstatic in your project root directory. From your code you can then reference those files with/static/ URLs:

exportdefault()=><imgsrc="/static/my-image.png"/>

Populating`<head>`

Examples

We expose a built-in component for appending elements to the<head> of the page.

importHeadfrom'next/head'exportdefault()=><div><Head><title>My page title</title><metaname="viewport"content="initial-scale=1.0, width=device-width"/></Head><p>Hello world!</p></div>

Note: The contents of<head> get cleared upon unmounting the component, so make sure each page completely defines what it needs in<head>, without making assumptions about what other pages added

Fetching data and component lifecycle

Examples

Data fetch

When you need state, lifecycle hooks orinitial data population you can export aReact.Component (instead of a stateless function, like shown above):

importReactfrom'react'exportdefaultclassextendsReact.Component{staticasyncgetInitialProps({ req}){constuserAgent=req ?req.headers['user-agent'] :navigator.userAgentreturn{ userAgent}}render(){return(<div>        Hello World{this.props.userAgent}</div>)}}

Notice that to load data when the page loads, we usegetInitialProps which is anasync static method. It can asynchronously fetch anything that resolves to a JavaScript plainObject, which populatesprops.

For the initial page load,getInitialProps will execute on the server only.getInitialProps will only be executed on the client when navigating to a different route via theLink component or using the routing APIs.

Note:getInitialProps cannot be used in children components. Only inpages.

If you are using some server only modules insidegetInitialProps, make sure toimport them properly.Otherwise, it'll slow down your app.

You can also define thegetInitialProps lifecycle method for stateless components:

constPage=({ stars})=><div>    Next stars:{stars}</div>Page.getInitialProps=async({ req})=>{constres=awaitfetch('https://api.github.com/repos/zeit/next.js')constjson=awaitres.json()return{stars:json.stargazers_count}}exportdefaultPage

getInitialProps receives a context object with the following properties:

pathname - path section of URL
query - query string section of URL parsed as an object
asPath -String of the actual path (including the query) shows in the browser
req - HTTP request object (server only)
res - HTTP response object (server only)
jsonPageRes -Fetch Response object (client only)
err - Error object if any error is encountered during the rendering

Routing

With`<Link>`

Examples

Hello World

Client-side transitions between routes can be enabled via a<Link> component. Consider these two pages:

// pages/index.jsimportLinkfrom'next/link'exportdefault()=><div>    Click{' '}<Linkhref="/about"><a>here</a></Link>{' '}    to read more</div>

// pages/about.jsexportdefault()=><p>Welcome to About!</p>

Note: use<Link prefetch> for maximum performance, to link and prefetch in the background at the same time

Client-side routing behaves exactly like the browser:

The component is fetched
If it definesgetInitialProps, data is fetched. If an error occurs,_error.js is rendered
After 1 and 2 complete,pushState is performed and the new component rendered

Each top-level component receives aurl property with the following API:

pathname -String of the current path excluding the query string
query -Object with the parsed query string. Defaults to{}
asPath -String of the actual path (including the query) shows in the browser
push(url, as=url) - performs apushState call with the given url
replace(url, as=url) - performs areplaceState call with the given url

The secondas parameter forpush andreplace is an optionaldecoration of the URL. Useful if you configured custom routes on the server.

With URL object

Examples

With URL Object Routing

The component<Link> can also receive an URL object and it will automatically format it to create the URL string.

// pages/index.jsimportLinkfrom'next/link'exportdefault()=><div>    Click{' '}<Linkhref={{pathname:'/about',query:{name:'Zeit'}}}><a>here</a></Link>{' '}    to read more</div>

That will generate the URL string/about?name=Zeit, you can use every property as defined in theNode.js URL module documentation.

Replace instead of push url

The default behaviour for the<Link> component is topush a new url into the stack. You can use thereplace prop to prevent adding a new entry.

// pages/index.jsimportLinkfrom'next/link'exportdefault()=><div>    Click{' '}<Linkhref="/about"replace><a>here</a></Link>{' '}    to read more</div>

Using a component that support`onClick`

<Link> supports any component that supports theonClick event. In case you don't provide an<a> tag, it will only add theonClick event handler and won't pass thehref property.

// pages/index.jsimportLinkfrom'next/link'exportdefault()=><div>    Click{' '}<Linkhref="/about"><imgsrc="/static/image.png"/></Link></div>

Forcing the Link to expose`href` to its child

If child is an<a> tag and doesn't have a href attribute we specify it so that the repetition is not needed by the user. However, sometimes, you’ll want to pass an<a> tag inside of a wrapper and theLink won’t recognize it as ahyperlink, and, consequently, won’t transfer itshref to the child. In cases like that, you should define a booleanpassHref property to theLink, forcing it to expose itshref property to the child.

importLinkfrom'next/link'importUnexpected_Afrom'third-library'exportdefault({ href, name})=><Linkhref={href}passHref><Unexpected_A>{name}</Unexpected_A></Link>

Imperatively

Examples

You can also do client-side page transitions using thenext/router

importRouterfrom'next/router'exportdefault()=><div>    Click<spanonClick={()=>Router.push('/about')}>here</span> to read more</div>

AboveRouter object comes with the following API:

route -String of the current route
pathname -String of the current path excluding the query string
query -Object with the parsed query string. Defaults to{}
asPath -String of the actual path (including the query) shows in the browser
push(url, as=url) - performs apushState call with the given url
replace(url, as=url) - performs areplaceState call with the given url

The secondas parameter forpush andreplace is an optionaldecoration of the URL. Useful if you configured custom routes on the server.

Note: in order to programmatically change the route without triggering navigation and component-fetching, useprops.url.push andprops.url.replace within a component

With URL object

You can use an URL object the same way you use it in a<Link> component topush andreplace an url.

importRouterfrom'next/router'consthandler=()=>Router.push({pathname:'/about',query:{name:'Zeit'}})exportdefault()=><div>    Click<spanonClick={handler}>here</span> to read more</div>

This uses of the same exact parameters as in the<Link> component.

Router Events

You can also listen to different events happening inside the Router.Here's a list of supported events:

routeChangeStart(url) - Fires when a route starts to change
routeChangeComplete(url) - Fires when a route changed completely
routeChangeError(err, url) - Fires when there's an error when changing routes
beforeHistoryChange(url) - Fires just before changing the browser's history
appUpdated(nextRoute) - Fires when switching pages and there's a new version of the app

Hereurl is the URL shown in the browser. If you callRouter.push(url, as) (or similar), then the value ofurl will beas.

Here's how to properly listen to the router eventrouteChangeStart:

Router.onRouteChangeStart=url=>{console.log('App is changing to: ',url)}

If you no longer want to listen to that event, you can simply unset the event listener like this:

Router.onRouteChangeStart=null

If a route load is cancelled (for example by clicking two links rapidly in succession),routeChangeError will fire. The passederr will contained acancelled property set totrue.

Router.onRouteChangeError=(err,url)=>{if(err.cancelled){console.log(`Route to${url} was cancelled!`)}}

If you change a route while in between a new deployment, we can't navigate the app via client side. We need to do a full browser navigation. We do it automatically for you.

But you can customize that viaRoute.onAppUpdated event like this:

Router.onAppUpdated=nextUrl=>{// persist the local statelocation.href=nextUrl}

Shallow Routing

Examples

Shallow Routing

Shallow routing allows you to change the URL without runninggetInitialProps. You'll receive the updatedpathname and thequery via theurl prop of the same page that's loaded, without losing state.

You can do this by invoking eitherRouter.push orRouter.replace with theshallow: true option. Here's an example:

// Current URL is "/"consthref='/?counter=10'constas=hrefRouter.push(href,as,{shallow:true})

Now, the URL is updated to/?counter=10. You can see the updated URL withthis.props.url inside theComponent.

You can watch for URL changes viacomponentWillReceiveProps hook as shown below:

componentWillReceiveProps(nextProps){const{ pathname, query}=nextProps.url// fetch data based on the new query}

NOTES:
Shallow routing worksonly for same page URL changes. For an example, let's assume we've another page calledabout, and you run this:
Router.push('/about?counter=10','/about?counter=10',{shallow:true})
Since that's a new page, it'll unload the current page, load the new one and callgetInitialProps even though we asked to do shallow routing.

Using a Higher Order Component

Examples

Using the `withRouter` utility

If you want to access therouter object inside any component in your app, you can use thewithRouter Higher-Order Component. Here's how to use it:

import{withRouter}from'next/router'constActiveLink=({ children, router, href})=>{conststyle={marginRight:10,color:router.pathname===href?'red' :'black'}consthandleClick=(e)=>{e.preventDefault()router.push(href)}return(<ahref={href}onClick={handleClick}style={style}>{children}</a>)}exportdefaultwithRouter(ActiveLink)

The aboverouter object comes with an API similar tonext/router.

Prefetching Pages

(This is a production only feature)

Examples

Prefetching

Next.js has an API which allows you to prefetch pages.

Since Next.js server-renders your pages, this allows all the future interaction paths of your app to be instant. Effectively Next.js gives you the great initial download performance of awebsite, with the ahead-of-time download capabilities of anapp.Read more.

With prefetching Next.js only downloads JS code. When the page is getting rendered, you may need to wait for the data.

With`<Link>`

You can addprefetch prop to any<Link> and Next.js will prefetch those pages in the background.

importLinkfrom'next/link'// example header componentexportdefault()=><nav><ul><li><Linkprefetchhref="/"><a>Home</a></Link></li><li><Linkprefetchhref="/about"><a>About</a></Link></li><li><Linkprefetchhref="/contact"><a>Contact</a></Link></li></ul></nav>

Imperatively

Most prefetching needs are addressed by<Link />, but we also expose an imperative API for advanced usage:

importRouterfrom'next/router'exportdefault({ url})=><div><aonClick={()=>setTimeout(()=>url.pushTo('/dynamic'),100)}>      A route transition will happen after 100ms</a>{// but we can prefetch it!Router.prefetch('/dynamic')}</div>

Custom server and routing

Examples

Typically you start your next server withnext start. It's possible, however, to start a server 100% programmatically in order to customize routes, use route patterns, etc

This example makes/a resolve to./pages/b, and/b resolve to./pages/a:

// This file doesn't not go through babel or webpack transformation.// Make sure the syntax and sources this file requires are compatible with the current node version you are running// See https://github.com/zeit/next.js/issues/1245 for discussions on Universal Webpack or universal Babelconst{ createServer}=require('http')const{ parse}=require('url')constnext=require('next')constdev=process.env.NODE_ENV!=='production'constapp=next({ dev})consthandle=app.getRequestHandler()app.prepare().then(()=>{createServer((req,res)=>{// Be sure to pass `true` as the second argument to `url.parse`.// This tells it to parse the query portion of the URL.constparsedUrl=parse(req.url,true)const{ pathname, query}=parsedUrlif(pathname==='/a'){app.render(req,res,'/b',query)}elseif(pathname==='/b'){app.render(req,res,'/a',query)}else{handle(req,res,parsedUrl)}}).listen(3000,err=>{if(err)throwerrconsole.log('> Ready on http://localhost:3000')})})

Thenext API is as follows:

next(path: string, opts: object) -path is where the Next project is located
next(opts: object)

Supported options:

dev (bool) whether to launch Next.js in dev mode - defaultfalse
dir (string) where the Next project is located - default'.'
quiet (bool) Hide error messages containing server information - defaultfalse
conf (object) the same object you would use innext.config.js - default{}

Then, change yourstart script toNODE_ENV=production node server.js.

Dynamic Import

Examples

With Dynamic Import

Next.js supports TC39dynamic import proposal for JavaScript.With that, you could import JavaScript modules (inc. React Components) dynamically and work with them.

You can think dynamic imports as another way to split your code into manageable chunks.Since Next.js supports dynamic imports with SSR, you could do amazing things with it.

Here are a few ways to use dynamic imports.

1. Basic Usage (Also does SSR)

importdynamicfrom'next/dynamic'constDynamicComponent=dynamic(import('../components/hello'))exportdefault()=><div><Header/><DynamicComponent/><p>HOME PAGE is here!</p></div>

2. With Custom Loading Component

importdynamicfrom'next/dynamic'constDynamicComponentWithCustomLoading=dynamic(import('../components/hello2'),{loading:()=><p>...</p>})exportdefault()=><div><Header/><DynamicComponentWithCustomLoading/><p>HOME PAGE is here!</p></div>

3. With No SSR

importdynamicfrom'next/dynamic'constDynamicComponentWithNoSSR=dynamic(import('../components/hello3'),{ssr:false})exportdefault()=><div><Header/><DynamicComponentWithNoSSR/><p>HOME PAGE is here!</p></div>

4. With Multiple Modules At Once

importdynamicfrom'next/dynamic'constHelloBundle=dynamic({modules:props=>{constcomponents={Hello1:import('../components/hello1'),Hello2:import('../components/hello2')}// Add remove components based on propsreturncomponents},render:(props,{ Hello1, Hello2})=><div><h1>{props.title}</h1><Hello1/><Hello2/></div>})exportdefault()=><HelloBundletitle="Dynamic Bundle"/>

Custom`<Document>`

Examples

Styled components custom document

Google AMP

Pages inNext.js skip the definition of the surrounding document's markup. For example, you never include<html>,<body>, etc. To override that default behavior, you must create a file at./pages/_document.js, where you can extend theDocument class:

// ./pages/_document.jsimportDocument,{Head,Main,NextScript}from'next/document'importflushfrom'styled-jsx/server'exportdefaultclassMyDocumentextendsDocument{staticgetInitialProps({ renderPage}){const{ html, head, errorHtml, chunks}=renderPage()conststyles=flush()return{ html, head, errorHtml, chunks, styles}}render(){return(<html><Head><style>{`body { margin: 0 } /* custom! */`}</style></Head><bodyclassName="custom_class">{this.props.customValue}<Main/><NextScript/></body></html>)}}

Thectx object is equivalent to the one received in allgetInitialProps hooks, with one addition:

renderPage (Function) a callback that executes the actual React rendering logic (synchronously). It's useful to decorate this function in order to support server-rendering wrappers like Aphrodite'srenderStatic

Note: React-components outside of<Main /> will not be initialised by the browser. If you need shared components in all your pages (like a menu or a toolbar), donot add application logic here, but take a look atthis example.

Custom error handling

404 or 500 errors are handled both client and server side by a default componenterror.js. If you wish to override it, define a_error.js in the pages folder:

importReactfrom'react'exportdefaultclassErrorextendsReact.Component{staticgetInitialProps({ res, err}){conststatusCode=res ?res.statusCode :err ?err.statusCode :null;return{ statusCode}}render(){return(<p>{this.props.statusCode          ?`An error${this.props.statusCode} occurred on server`          :'An error occurred on client'}</p>)}}

Reusing the built-in error page

If you want to render the built-in error page you can by usingnext/error:

importReactfrom'react'importErrorfrom'next/error'importfetchfrom'isomorphic-fetch'exportdefaultclassPageextendsReact.Component{staticasyncgetInitialProps(){constres=awaitfetch('https://api.github.com/repos/zeit/next.js')conststatusCode=res.statusCode>200 ?res.statusCode :falseconstjson=awaitres.json()return{ statusCode,stars:json.stargazers_count}}render(){if(this.props.statusCode){return<ErrorstatusCode={this.props.statusCode}/>}return(<div>        Next stars:{this.props.stars}</div>)}}

If you have created a custom error page you have to import your own_error component instead ofnext/error

Custom configuration

For custom advanced behavior of Next.js, you can create anext.config.js in the root of your project directory (next topages/ andpackage.json).

Note:next.config.js is a regular Node.js module, not a JSON file. It gets used by the Next server and build phases, and not included in the browser build.

// next.config.jsmodule.exports={/* config options here */}

Setting a custom build directory

You can specify a name to use for a custom build directory. For example, the following config will create abuild folder instead of a.next folder. If no configuration is specified then next will create a.next folder.

// next.config.jsmodule.exports={distDir:'build'}

Configuring the onDemandEntries

Next exposes some options that give you some control over how the server will dispose or keep in memories pages built:

module.exports={onDemandEntries:{// period (in ms) where the server will keep pages in the buffermaxInactiveAge:25*1000,// number of pages that should be kept simultaneously without being disposedpagesBufferLength:2,}}

Customizing webpack config

Examples

Custom webpack bundle analyzer

In order to extend our usage ofwebpack, you can define a function that extends its config vianext.config.js.

// This file is not going through babel transformation.// So, we write it in vanilla JS// (But you could use ES2015 features supported by your Node.js version)module.exports={webpack:(config,{ buildId, dev})=>{// Perform customizations to webpack config// Important: return the modified configreturnconfig},webpackDevMiddleware:config=>{// Perform customizations to webpack dev middleware config// Important: return the modified configreturnconfig}}

Warning: Adding loaders to support new file types (css, less, svg, etc.) isnot recommended because only the client code gets bundled via webpack and thus it won't work on the initial server rendering. Babel plugins are a good alternative because they're applied consistently between server/client rendering (e.g.babel-plugin-inline-react-svg).

Customizing babel config

Examples

Custom babel configuration

In order to extend our usage ofbabel, you can simply define a.babelrc file at the root of your app. This file is optional.

If found, we're going to consider it thesource of truth, therefore it needs to define what next needs as well, which is thenext/babel preset.

This is designed so that you are not surprised by modifications we could make to the babel configurations.

Here's an example.babelrc file:

{"presets": ["next/babel","stage-0"]}

CDN support with Asset Prefix

To set up a CDN, you can set up theassetPrefix setting and configure your CDN's origin to resolve to the domain that Next.js is hosted on.

constisProd=process.env.NODE_ENV==='production'module.exports={// You may only need to add assetPrefix in the production.assetPrefix:isProd ?'https://cdn.mydomain.com' :''}

Note: Next.js will automatically use that prefix the scripts it loads, but this has no effect whatsoever on/static. If you want to serve those assets over the CDN, you'll have to introduce the prefix yourself. One way of introducing a prefix that works inside your components and varies by environment is documentedin this example.

Production deployment

To deploy, instead of runningnext, you want to build for production usage ahead of time. Therefore, building and starting are separate commands:

next buildnext start

For example, to deploy withnow apackage.json like follows is recommended:

{"name":"my-app","dependencies": {"next":"latest"  },"scripts": {"dev":"next","build":"next build","start":"next start"  }}

Then runnow and enjoy!

Next.js can be deployed to other hosting solutions too. Please have a look at the'Deployment' section of the wiki.

Note:NODE_ENV is properly configured by thenext subcommands, if absent, to maximize performance. if you’re using Next.jsprogrammatically, it’s your responsibility to setNODE_ENV=production manually!

Note: we recommend putting.next, or your custom dist folder (Please have a look at'Custom Config'. You can set a custom folder in config,.npmignore, or.gitignore. Otherwise, usefiles ornow.files to opt-into a whitelist of files you want to deploy (and obviously exclude.next or your custom dist folder).

Static HTML export

Examples

Static export

This is a way to run your Next.js app as a standalone static app without any Node.js server. The export app supports almost every feature of Next.js including dynamic urls, prefetching, preloading and dynamic imports.

Usage

Simply develop your app as you normally do with Next.js. Then create a custom Next.jsconfig as shown below:

// next.config.jsmodule.exports={exportPathMap:function(){return{'/':{page:'/'},'/about':{page:'/about'},'/readme.md':{page:'/readme'},'/p/hello-nextjs':{page:'/post',query:{title:'hello-nextjs'}},'/p/learn-nextjs':{page:'/post',query:{title:'learn-nextjs'}},'/p/deploy-nextjs':{page:'/post',query:{title:'deploy-nextjs'}}}}}

Note that if the path ends with a directory, it will be exported as/dir-name/index.html, but if it ends with an extension, it will be exported as the specified filename, e.g./readme.md above. If you use a file extension other than.html, you may need to set theContent-Type header totext/html when serving this content.

In that, you specify what are the pages you need to export as static HTML.

Then simply run these commands:

next buildnextexport

For that you may need to add a NPM script topackage.json like this:

{"scripts": {"build":"next build && next export"  }}

And run it at once with:

npm run build

Then you've a static version of your app in the “out" directory.

You can also customize the output directory. For that runnext export -h for the help.

Now you can deploy that directory to any static hosting service. Note that there is an additional step for deploying to GitHub Pages,documented here.

For an example, simply visit the “out” directory and run following command to deploy your app toZEIT now.

now

Limitation

With next export, we build HTML version of your app when you run the commandnext export. In that time, we'll run thegetInitialProps functions of your pages.

So, you could only usepathname,query andasPath fields of thecontext object passed togetInitialProps. You can't usereq orres fields.

Basically, you won't be able to render HTML content dynamically as we pre-build HTML files. If you need that, you need run your app withnext start.

Recipes

FAQ

Is this production ready?

Next.js has been poweringhttps://zeit.co since its inception.

We’re ecstatic about both the developer experience and end-user performance, so we decided to share it with the community.

How big is it?

The client side bundle size should be measured in a per-app basis.A small Next main bundle is around 65kb gzipped.

Is this like `create-react-app`?

Yes and No.

Yes in that both make your life easier.

No in that it enforces astructure so that we can do more advanced things like:

Server side rendering
Automatic code splitting

In addition, Next.js provides two built-in features that are critical for every single website:

Routing with lazy component loading:<Link> (by importingnext/link)
A way for components to alter<head>:<Head> (by importingnext/head)

If you want to create re-usable React components that you can embed in your Next.js app or other React applications, usingcreate-react-app is a great idea. You can laterimport it and keep your codebase clean!

How do I use CSS-in-JS solutions?

Next.js bundlesstyled-jsx supporting scoped css. However you can use any CSS-in-JS solution in your Next app by just including your favorite libraryas mentioned before in the document.

How do I use CSS preprocessors like SASS / SCSS / LESS?

Next.js bundlesstyled-jsx supporting scoped css. However you can use any CSS preprocessor solution in your Next app by following one of these examples:

What syntactic features are transpiled? How do I change them?

We track V8. Since V8 has wide support for ES6 andasync andawait, we transpile those. Since V8 doesn’t support class decorators, we don’t transpile those.

Seethis andthis

Why a new Router?

Next.js is special in that:

Routes don’t need to be known ahead of time
Routes are always lazy-loadable
Top-level components can definegetInitialProps that shouldblock the loading of the route (either when server-rendering or lazy-loading)

As a result, we were able to introduce a very simple approach to routing that consists of two pieces:

Every top level component receives aurl object to inspect the url or perform modifications to the history
A<Link /> component is used to wrap elements like anchors (<a/>) to perform client-side transitions

We tested the flexibility of the routing with some interesting scenarios. For an example, check outnextgram.

How do I define a custom fancy route?

Weadded the ability to map between an arbitrary URL and any component by supplying a request handler.

On the client side, we have a parameter callas on<Link> thatdecorates the URL differently from the URL itfetches.

How do I fetch data?

It’s up to you.getInitialProps is anasync function (or a regular function that returns aPromise). It can retrieve data from anywhere.

Can I use it with GraphQL?

Yes! Here's an example withApollo.

Can I use it with Redux?

Yes! Here's anexample

Why aren't routes I have for my static export accessible in the development server?

This is a known issue with the architecture of Next.js. Until a solution is built into the framework, take a look atthis example solution to centralize your routing.

Can I use Next with my favorite Javascript library or toolkit?

Since our first release we've hadmany example contributions, you can check them out in theexamples directory

What is this inspired by?

Many of the goals we set out to accomplish were the ones listed inThe 7 principles of Rich Web Applications by Guillermo Rauch.

The ease-of-use of PHP is a great inspiration. We feel Next.js is a suitable replacement for many scenarios where you otherwise would use PHP to output HTML.

Unlike PHP, we benefit from the ES6 module system and every file exports acomponent or function that can be easily imported for lazy evaluation or testing.

As we were researching options for server-rendering React that didn’t involve a large number of steps, we came acrossreact-page (now deprecated), a similar approach to Next.js by the creator of React Jordan Walke.

Contributing

Please see ourcontributing.md

Authors

Arunoda Susiripala (@arunoda) – ▲ZEIT
Tim Neutkens (@timneutkens)
Naoyuki Kanezawa (@nkzawa) – ▲ZEIT
Tony Kovanen (@tonykovanen) – ▲ZEIT
Guillermo Rauch (@rauchg) – ▲ZEIT
Dan Zajdband (@impronunciable) – Knight-Mozilla / Coral Project

About

A minimalistic framework for universal server-rendered React applications

zeit.co/blog/next

Releases

5tags

Packages

No packages published

Languages

JavaScript100.0%

Movatterモバイル変換

License

JavaScriptExpert/next.js

Folders and files

Latest commit

History

Repository files navigation

How to use

Setup

Automatic code splitting

CSS

Built-in CSS support

CSS-in-JS

Static file serving (e.g.: images)

Populating<head>

Fetching data and component lifecycle

Routing

With<Link>

With URL object

Replace instead of push url

Using a component that supportonClick

Forcing the Link to exposehref to its child

Imperatively

With URL object

Router Events

Shallow Routing

Using a Higher Order Component

Prefetching Pages

With<Link>

Imperatively

Custom server and routing

Dynamic Import

1. Basic Usage (Also does SSR)

2. With Custom Loading Component

3. With No SSR

4. With Multiple Modules At Once

Custom<Document>

Custom error handling

Reusing the built-in error page

Custom configuration

Setting a custom build directory

Configuring the onDemandEntries

Customizing webpack config

Customizing babel config

CDN support with Asset Prefix

Production deployment

Static HTML export

Usage

Limitation

Recipes

FAQ

Contributing

Authors

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages0

Languages

Populating`<head>`

With`<Link>`

Using a component that support`onClick`

Forcing the Link to expose`href` to its child

With`<Link>`

Custom`<Document>`

Packages