- Notifications
You must be signed in to change notification settings - Fork0
A minimalistic framework for universal server-rendered React applications
License
JavaScriptExpert/next.js
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Next.js is a minimalistic framework for server-rendered React applications.
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:
importReactfrom'react'exportdefault()=>(<div>Welcome to next.js!</div>)
and then just runnext and go tohttp://localhost:3000
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/
Everyimport you declare gets bundled and served with each page
importReactfrom'react'importcowsayfrom'cowsay'exportdefault()=>(<pre>{cowsay('hi there!')}</pre>)
That means pages never load unneccessary code!
We useAphrodite to provide a great built-in solution for CSS modularization
importReactfrom'react'import{css,StyleSheet}from'next/css'exportdefault()=>{<divclassName={css(styles.main)}> Hello world</div>})conststyles=StyleSheet.create({main:{background:'red','@media (max-width: 600px)':{background:'blue'}}})
We expose a built-in component for appending elements to the<head> of the page.
importReactfrom'react'importHeadfrom'next/head'exportdefault()=>(<Head><title>My page title</title><metaname="viewport"content="initial-scale=1.0, width=device-width"/></Head><p>Helloworld!</p>)
When state, lifecycle hooks or initial data population you can export aReact.Component:
importReactfrom'react'exportdefaultclassextendsReact.Component{asyncgetInitialProps({ isServer, req}){returnisServer ?{userAgent:req.headers.userAgent} :{userAgent:navigator.userAgent}}render(){return<div> Hello World{this.props.userAgent}</div>}}
Client-side transitions between routes are enabled via a<Link> component
importReactfrom'react'importLinkfrom'next/link'exportdefault()=>(<div>Click<Linkhref="/about"><a>here</a></Link> to read more</div>)
importReactfrom'react'exportdefault()=>(<p>Welcome to About!</p>)
Client-side routing behaves exactly like the native UA:
- The component is fetched
- If it defines
getInitialProps, data is fetched. If an error occurs,_error.jsis rendered - After 1 and 2 complete,
pushStateis performed and the new component rendered
Each top-level component receives aurl property with the following API:
path-Stringof the current path excluding the query stringquery-Objectwith the parsed query string. Defaults to{}push(url)- performs apushStatecall associated with the current componentreplace(url)- performs areplaceStatecall associated with the current componentpushTo(url)- performs apushStatecall that renders the newurl. This is equivalent to following a<Link>replaceTo(url)- performs areplaceStatecall that renders the newurl
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:
importReactfrom'react'exportdefault({ statusCode})=>(<p>An error{statusCode} occurred</p>)
To deploy, run:
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" }}About
A minimalistic framework for universal server-rendered React applications
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Languages
- JavaScript100.0%