Skip to content

Commit fd198d2

Browse files
sergiodxatimneutkens
authored andcommitted
Example: with absolute imports (vercel#2863)
* Add with-absolute-imports example * Fix examples repo urls to point to master instead of v3-beta
1 parent a142848 commit fd198d2

File tree

7 files changed

+72
-6
lines changed

7 files changed

+72
-6
lines changed
+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"presets": "next/babel",
3+
"plugins": [
4+
[
5+
"module-resolver",
6+
{
7+
"root": ["./"],
8+
"alias": {
9+
"components": "./components"
10+
}
11+
}
12+
]
13+
]
14+
}
+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# Example app with absolute imports
2+
3+
## How to use
4+
5+
Download the example [or clone the repo](https://github.com/zeit/next.js):
6+
7+
```bash
8+
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-absolute-import
9+
cd with-absolute-import
10+
```
11+
12+
Install it and run:
13+
14+
```bash
15+
npm install
16+
npm run dev
17+
```
18+
19+
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
20+
21+
```bash
22+
now
23+
```
24+
25+
## The idea behind the example
26+
27+
This example shows how to configure Babel to have absolute imports instead of relative imports without modifying the Webpack configuration.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default () => (
2+
<header>
3+
<h1>Hello world!</h1>
4+
</header>
5+
)
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"scripts": {
3+
"dev": "next",
4+
"build": "next build",
5+
"start": "next start"
6+
},
7+
"dependencies": {
8+
"babel-plugin-module-resolver": "^2.7.1",
9+
"next": "^3.0.6",
10+
"react": "^15.6.1",
11+
"react-dom": "^15.6.1"
12+
}
13+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import Header from 'components/header.js'
2+
3+
export default () => (
4+
<div>
5+
<Header />
6+
</div>
7+
)

examples/with-apollo-auth/README.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ https://next-with-apollo-auth.now.sh
1010
Download the example [or clone the repo](https://github.com/zeit/next.js):
1111

1212
```bash
13-
curl https://codeload.github.com/zeit/next.js/tar.gz/v3-beta | tar -xz --strip=2 next.js-3-beta/examples/with-apollo-auth
13+
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-apollo-auth
1414
cd with-apollo-auth
1515
```
1616

@@ -32,13 +32,13 @@ now
3232
This is an extention of the _[with Apollo](https://github.com/zeit/next.js/tree/master/examples/with-apollo#the-idea-behind-the-example)_ example:
3333

3434
> [Apollo](http://dev.apollodata.com) is a GraphQL client that allows you to easily query the exact data you need from a GraphQL server. In addition to fetching and mutating data, Apollo analyzes your queries and their results to construct a client-side cache of your data, which is kept up to date as further queries and mutations are run, fetching more results from the server.
35-
>
35+
>
3636
> In this simple example, we integrate Apollo seamlessly with Next by wrapping our *pages* inside a [higher-order component (HOC)](https://facebook.github.io/react/docs/higher-order-components.html). Using the HOC pattern we're able to pass down a central store of query result data created by Apollo into our React component hierarchy defined inside each page of our Next application.
37-
>
37+
>
3838
> On initial page load, while on the server and inside `getInitialProps`, we invoke the Apollo method, [`getDataFromTree`](http://dev.apollodata.com/react/server-side-rendering.html#getDataFromTree). This method returns a promise; at the point in which the promise resolves, our Apollo Client store is completely initialized.
39-
>
39+
>
4040
> This example relies on [graph.cool](https://www.graph.cool) for its GraphQL backend.
41-
>
41+
>
4242
> *Note: Apollo uses Redux internally; if you're interested in integrating the client with your existing Redux store check out the [`with-apollo-and-redux`](https://github.com/zeit/next.js/tree/master/examples/with-apollo-and-redux) example.*
4343
4444
[graph.cool](https://www.graph.cool) can be setup with many different

examples/with-dynamic-import/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
Download the example [or clone the repo](https://github.com/zeit/next.js):
66

77
```bash
8-
curl https://codeload.github.com/zeit/next.js/tar.gz/v3-beta | tar -xz --strip=2 next.js-3-beta/examples/with-dynamic-import
8+
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-dynamic-import
99
cd with-dynamic-import
1010
```
1111

0 commit comments

Comments
 (0)