VS Code Next.js snippets
This extension for Visual Studio Code adds snippets for Next.js
Supported languages (file extensions)
- JavaScript (.js)
- JavaScript React (.jsx)
- TypeScript (.ts)
- TypeScript React (.tsx)
Basic
| Prefix |
Method |
impn→ |
import { moduleName } from 'next' |
JavaScript/JavaScript React:
sp
export const getStaticProps = async (context) => {
return {
props: {},
}
}
spth
export const getStaticPaths = async () => {
return {
paths: [{ params: {} }],
fallback: true,
}
}
ssp
export const getServerSideProps = async (context) => {
return {
props: {},
}
}
initp
FileName.getInitialProps = async (context) => {
return {
props: {},
}
}
np
Creates next page
const FileName = () => {
return <div></div>
}
export default FileName
npsp
Creates next page with getStaticProps() method
const FileName = () => {
return <div></div>
}
export const getStaticProps = async (context) => {
return {
props: {},
}
}
export default FileName
npssp
Creates next page with getServerSideProps() method
const FileName = () => {
return <div></div>
}
export const getServerSideProps = async (context) => {
return {
props: {},
}
}
export default FileName
npinitp
Creates next page with getInitialProps method
const FileName = () => {
return <div></div>
}
FileName.getInitialProps = async (context) => {
return {}
}
export default FileName
capp
Creates custom app function in _app file
const MyApp = ({ Component, pageProps }) => {
return <Component {...pageProps} />
}
export default MyApp
cappip
Creates custom app function with getInitialProps in _app file
const MyApp = ({ Component, pageProps }) => {
return <Component {...pageProps} />
}
MyApp.getInitialProps = async (appContext) => {
const appProps = await App.getInitialProps(appContext)
return { ...appProps }
}
export default MyApp
cdoc
Creates custom doc class with getInitialProps in _document file
import Document from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return initialProps
}
export default MyDocument
cdocdom
Creates custom doc class with getInitialProps and dom tree in _document file
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
TypeScript/TypeScript React:
tssp
export const getStaticProps: GetStaticProps = async (context) => {
return {
props: {},
}
}
tsspth
export const getStaticPaths: GetStaticPaths = async () => {
return {
paths: [{ params: {} }],
fallback: true,
}
}
tsssp
export const getServerSideProps: GetServerSideProps = async (context) => {
return {
props: {},
}
}
tsnp
import { NextPage } from 'next'
interface Props {}
const FileName: NextPage<Props> = () => {
return <div></div>
}
export default FileName
tsnpsp
import { GetStaticProps, NextPage } from 'next'
interface Props {}
const FileName: NextPage<Props> = () => {
return <div></div>
}
export const getStaticProps: GetStaticProps = async (context) => {
return {
props: {},
}
}
export default FileName
tsnpssp
import { NextPage, GetServerSideProps } from 'next'
interface Props {}
const FileName: NextPage<Props> = () => {
return <div></div>
}
export const getServerSideProps: GetServerSideProps = (context) => {
return {
props: {},
}
}
export default FileName
tsnpinitp
import { NextPage } from 'next'
interface Props {}
const FileName: NextPage<Props> = () => {
return <div></div>
}
FileName.getInitialProps = async (context) => {
return {}
}
export default FileName
tscapp
import { AppProps } from 'next/app'
const MyApp = ({ Component, pageProps }: AppProps) => {
return <Component {...pageProps} />
}
export default MyApp
tscdoc
import Document, { DocumentContext } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const initialProps = await Document.getInitialProps(ctx)
return initialProps
}
export default MyDocument
